React-Table表头data-prefix动态修改失效（仅单元格生效）

算力阿峰

2026-7-19

问题诊断与解决建议

失效原因

你通过getElementById直接修改DOM属性的方式在表头失效，核心原因是react-table的Header组件会随表格状态（如排序、分页、选中状态变化）重新渲染。React基于虚拟DOM更新真实DOM，重新渲染时会根据组件的JSX模板生成新的DOM节点，直接覆盖你手动修改的data-prefix属性。行内图标暂时有效只是因为行组件未触发重新渲染，本质上这种直接操作DOM的方式不符合React数据驱动的设计原则，本身就不可靠。

正确解决方法：用React状态控制图标样式

改用React状态管理图标状态，而非直接操作DOM，步骤如下：

添加状态变量
在组件内部定义状态，标记进程是否正在运行：

import { useState } from 'react';

// 组件内部
const [isProcessing, setIsProcessing] = useState(false);

修改按钮点击逻辑
调用mergePDFs时更新状态，进程结束后无论成功失败都重置状态：

<button 
  className="border rounded p-2 mb-2"
  onClick={() => {
    setIsProcessing(true);
    // 假设mergePDFs是异步函数，用finally确保状态重置
    mergePDFs(selectedFlatRows.map(row => row.original))
      .finally(() => setIsProcessing(false));
  }}
>

根据状态渲染图标
在图标元素中，通过状态动态设置data-prefix和className：

<i 
  id="DownloadSelectedFolder" 
  className={`${isProcessing ? 'fas' : 'far'} fa-folder-open action mr-2`}
  data-prefix={isProcessing ? 'fas' : 'far'}
  disabled
></i>