React：PDF 查看器重新渲染太多，数据结束未定义

Question

我想并排显示 2 个文件，以便在 SyncFusion 的 2 个 TabComponent 中比较它们。

文件以 base64 编码，可以有多种类型：XML、PNG、PDF 等。

对于每种类型，我都有办法向用户展示它们，例如 PNG 的 img 标签、react-xml-viewer 的 XMLViewer 标签或 PDF 文件的 react-pdf。

它适用于大多数类型，我什至在单击相应选项卡时动态加载文件，因此应用程序不会因在应用程序启动时加载的每个文件而不知所措，因为对最大文件数没有限制可以加载并且没有限制。

但是对于 PDF 查看器（我尝试了 [react-pdf]（https://stackoverflow.com 和 @syncfusion/ej2-react-pdfviewer 一个），出于某种原因我不明白不起作用，因为在组件中文件未定义但在控制台中打印文件。

我使用此函数返回将用于显示 PDF 文件的 jsx，对于每种类型，该函数看起来都相同，显示文件的组件是唯一的区别。

const renderPdf = (id, file) => {
console.log("PDF", file) // file is printed for the first render, then it is undefined
return(
<div key={id} className='file_container'>
    <Document file={`data:application/pdf;base64,${file}`} style={{height:50+'vh'}}>
{/* here the file is always undefined*/}
        <PdfPage size="A4" pageNumber={1} className="pdfFacture">
        </PdfPage>
    </Document>
</div>
)
}

以这种方式调用此函数以将 JSX 放入 DOM 中，参数是选择新标题的事件：

args.selectingContent.outerHtml = ReactDOMServer.renderToString(documentToRender(type, id, file))

documentToRender 函数如下所示：

const documentToRender = (type, id, file, side) => {
        switch(type){
            case "pdf":
                return renderPdf(id, file, side)
            case "xml":
                return renderXml(id, file)
            case "png":
                return renderPNG(id, file)
            case "jpeg":
                return renderJPEG(id, file)
            default:
                return renderAnyFile(id, file)
        }
    }

Answer 1

我们能够从 Tab 组件内的 base64 字符串加载 PDF。我们分享了以下示例供您参考。

示例：https://stackblitz.com/edit/react-pfj5hn-nx855y?file=index.html,index.js

试试这个样本，然后将修改后的样本返回给我们，或者分享重现所报告问题的样本。这将有助于我们进一步分析并提供详细信息。