Syncfusion Tab を使用して、タブに基づいて複数の種類のファイルを表示しています。 表示したいファイル形式の 1 つは PDF 形式です。 残念ながら、これまで表示しようとした他の種類のファイルとは異なり、この種類のファイルはある意味ブロックされています。

私は、PDF を表示し、正しいタブが選択されたときにファイルをロードするために、react-pdf を使用しています (他には何も使用したくありません)。タブを切り替えると、ファイルはクリアされます。 useQuery を使用してサーバーにリクエストを送信し、データベースからファイルを取得します。コンソールではファイルを印刷できますが、何らかの理由で、タブコンポーネントでは、react-pdf が読み込み状態のままになります。

私は、react-pdf コンポーネントと、useQuery を呼び出してファイルを取得するボタンだけを使用して同じことを複製しようとしましたが、正常に動作し、PDF は表示されますが、タブコンポーネントには表示されません。

私のコードは次のとおりです:

クエリを使用:

renderPdf 関数は、タイプに基づいた他のレンダリング関数と同様、別のファイルにあります。ファイル パラメータは親コンポーネントの状態であり、(親コンポーネント内の) useQuery 結果によって更新されます。新しいタブが選択されるたびにクエリが再フェッチされます (選択イベント):

タブコンポーネント:

そして、各タブの作成に使用される TabContent テンプレート: