syncfusion tab 的 `selecting` 事件触发过早，导致 react-pdf 在 dom 尚未就绪时尝试渲染 base64 pdf，从而卡在 loading 状态；应改用 `selected` 事件，在内容真正挂载后加载文件。
在使用 Syncfusion Tab 组件集成 react-pdf 渲染 PDF 文件时，一个常见却隐蔽的问题是：PDF 始终停留在加载状态（如
Syncfusion 提供两个关键事件：
- selecting：在切换 Tab 前 触发，此时目标 Tab 的 DOM 节点尚未插入文档，refetch() 虽然执行，但后续 Document 组件因父容器不可见/未挂载，无法正确初始化内部 Canvas 和 worker 流程；
- selected：在 Tab 切换完成、内容已渲染并挂载到 DOM 后触发——这才是安全发起数据请求和触发 PDF 渲染的正确时机。
✅ 正确做法：将 useQuery 的 enabled 控制逻辑从 selecting 移至 selected 事件中，并确保 file 状态更新后，
以下是关键修复步骤与优化后的代码示例：
1. 修改 Tab 事件绑定，使用 selected
<TabComponent
overflowMode="Scrollable"
id="defaultTab"
selected={onTabSelected} // ✅ 替换 selecting 为 selected
selectedItem={chosenItem}
>
{/* TabItemsDirective ... */}
</TabComponent>2. 在 onTabSelected 中按需启用查询
const onTabSelected = (args: SelectEventArgs) => {
const itemId = header[args.selectedIndex]?.id;
if (itemId && isPdfType(header[args.selectedIndex].type)) {
// ✅ 只在此刻启用查询，确保 DOM 已就绪
queryClient.invalidateQueries(['facture', itemId]);
// 若使用手动 refetch，也可在此调用 refetch()
}
};3. 重构 useQuery：移除副作用，交由事件驱动
// ❌ 错误：在 query 配置中直接调用 setFile（违反 React Hooks 规则，且时机不可控）
// ✅ 正确：纯数据获取，状态更新交由组件响应
const { data, isFetching, error } = useQuery(
['facture', id],
() => getUniqueCassandraFile(id).then(res => res.rows[0].file),
{
enabled: false, // ⚠️ 默认禁用，由 selected 事件控制
refetchOnWindowFocus: false,
}
);
// 在组件内安全更新状态（例如 useEffect 监听 data 变化）
useEffect(() => {
if (data) {
setFile(data); // ✅ 安全更新，触发 renderPdf 重渲染
}
}, [data]);4. 优化 renderPdf：增强健壮性
export const renderPdf = (id: string, file?: string) => {
if (!file) return <div className="pdf-placeholder">Loading PDF...</div>;
return (
<div key={id} className="file_container" style={{ height: '50vh', overflow: 'auto' }}>
<Document
file={`data:application/pdf;base64,${file}`}
onLoadSuccess={() => console.log('PDF loaded successfully')}
onLoadError={(err) => console.error('PDF load failed:', err)}
>
<Page
size="A4"
pageNumber={1}
className="pdfFacture"
renderTextLayer={false} // 可选：提升性能
renderAnnotationLayer={false}
/>
</Document>
</div>
);
};⚠️ 注意事项
-
避免 dangerouslySetInnerHTML + renderToStaticMarkup：你当前的 tabContent 使用了服务端渲染 API（ReactDOMServer.renderToStaticMarkup）将 React 元素转为 HTML 字符串，这会完全剥离 React 组件的交互能力与状态响应，导致 Document 无法挂载、useEffect 不执行、PDF 加载器永久阻塞。✅ 应改为直接返回 JSX（即 {switchRender(...)}），让 Tab 内容以客户端真实 React 组件形式运行。
- Base64 数据长度限制：确保后端返回的 Base64 字符串无换行、无空格，并通过 file.replace(/\s/g, '') 清洗，否则 react-pdf 会静默失败。
- 内存管理：切换 Tab 时建议清空 file 状态（如 setFile(undefined)），防止旧 PDF 占用内存或干扰新渲染。
通过以上调整，React-PDF 将在 Syncfusion Tab 的稳定 DOM 环境中启动加载流程，彻底解决“一直 loading”的问题，同时保持技术栈纯净（无需替换 react-pdf 或引入额外 PDF 渲染器）。
