我正在使用Syncfusion Tab来根据选项卡显示多种类型的文件。 我想要显示的一种文件类型是PDF类型。 不幸的是，与我尝试显示的所有其他类型不同，这个类型的文件有点阻塞我。

我使用react-pdf（我不想使用其他任何东西）来显示PDF，并在选择正确的选项卡时加载文件。如果我们切换选项卡，文件会被清空。我使用useQuery来向服务器发送请求并从数据库获取文件。我可以在控制台打印文件，但由于某种原因，在选项卡组件中，react-pdf停留在加载状态。

我尝试使用仅有react-pdf组件和调用useQuery来检索文件的按钮来复制相同的事情，它可以正常工作，PDF被显示出来，但在选项卡组件中不行。

我的代码如下：

使用查询：

const { status, data, error, isFetching, refetch } = useQuery(['facture', id], async () => {
     const data = await getUniqueCassandraFile(id)
     setFile(data.rows[0].file)
     return data.rows[0].file
}, {
     enabled: false,
     refetchOnWindowFocus: false
})

renderPdf函数在另一个文件中，以及其他根据类型的渲染函数，file参数是父组件的状态，该状态由useQuery结果（在父组件中）更新。每次选择新的选项卡时，查询都会重新获取（选择事件）：

export const renderPdf = (id, file) => {
    if(!file){
        return waiting(id)
    }
    return (
        <div key={id} className='file_container'>
            <Document file={`data:application/pdf;base64,${file}`} style={{height:50+'vh'}}>
                <Page size="A4" pageNumber={1} className="pdfFacture">
                </Page>
            </Document>
        </div>
    )
}

选项卡组件：

<div className="control-section tab-control-section">
   {chosenItem === -1 ? emptyDiv : 
   <TabComponent overflowMode="Scrollable" id="defaultTab" selecting={selecting} 
   selectedItem={chosenItem}>
      <TabItemsDirective>
      {
         header.map((item, index) => {
            return <TabItemDirective presentation={true} key={index} header={item} 
               content={{
                  template: tabContent, 
                  data: {content: content[index], type: item.type, id: item.id}}}/>
               })
            }
            </TabItemsDirective>
         </TabComponent>
      }
 </div>

以及用于创建每个选项卡的TabContent模板：

const tabContent = (data) => {
   return <div dangerouslySetInnerHTML={{__html: ReactDOMServer.renderToStaticMarkup(
             isFetching ? emptyDiv :
             switchRender(data.id, data.type, file))}}>
   </div>;
};