Ich verwende Syncfusion Tab, um mehrere Dateitypen basierend auf Tabs anzuzeigen. Einer der Dateitypen, die ich anzeigen möchte, ist der PDF-Typ. Leider blockiert mich dieser Dateityp im Gegensatz zu allen anderen Dateitypen, die ich anzuzeigen versucht habe.

Ich verwende „react-pdf“ (ich möchte nichts anderes verwenden), um das PDF anzuzeigen und die Datei zu laden, wenn die richtige Registerkarte ausgewählt ist. Wenn wir die Tabs wechseln, werden die Dateien gelöscht. Ich verwende useQuery, um eine Anfrage an den Server zu senden und die Datei aus der Datenbank abzurufen. Ich kann die Datei in der Konsole drucken, aber aus irgendeinem Grund bleibt „react-pdf“ in der Tab-Komponente im Ladezustand hängen.

Ich habe versucht, dasselbe zu replizieren, indem ich nur die Komponente „react-pdf“ und eine Schaltfläche verwendet habe, die „useQuery“ aufruft, um die Datei abzurufen, und es funktioniert einwandfrei, das PDF wird angezeigt, aber nicht in der Tab-Komponente.

Mein Code lautet wie folgt:

Abfrage verwenden:

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-Funktion befindet sich in einer anderen Datei, ebenso wie andere Renderfunktionen basierend auf dem Typ, der Dateiparameter ist der Status der übergeordneten Komponente, der durch das useQuery-Ergebnis (in der übergeordneten Komponente) aktualisiert wird. Die Abfrage wird jedes Mal erneut abgerufen, wenn eine neue Registerkarte ausgewählt wird (Ereignis auswählen):

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>
    )
}

Tab-Komponente:

<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>

Und TabContent-Vorlagen zum Erstellen jeder Registerkarte:

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