如何在react-data-table-component列中按条件添加图标？

问题描述 #

我想在react-data-table-component的字段数据旁添加警告图标，图标显示与否由字段selector之外的关联预警等级值控制。列的初始配置如下：

{
  name: 'Problems',
  selector: 'problems.length',
  maxWidth: '80px',
  sortable: true,
},

我试过用React-Icons和FortAwesome的FontAwesomeIcon，但都没法让图标显示在数值旁边。这是我参与的第一个大型React项目，希望能得到帮助。

以下是我写的代码，能编译但所有行都显示0且没有图标：

{
  name: 'Problems',
  selector: 'problems.length',
  maxWidth: '80px',
  sortable: true,
  cell: ((row) => {
      if (row.problemStatusWarningLevel > 0) {
          return <div>{row.problems.length}<FontAwesomeIcon icon="fa-triangle-exclamation" /></div>;
      } else {
          return <div>{row.problems.length}</div>;
      }
  })
},

问题排查与修复步骤 #

1. 修正FontAwesome图标导入与使用方式 #

FontAwesome不能直接传字符串作为icon属性值，必须导入对应图标变量：

• 先确保安装依赖：

  npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
  

• 在组件顶部导入所需内容：

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
  

• 修改图标使用代码：

  <FontAwesomeIcon icon={faTriangleExclamation} />
  

2. 校验行数据的正确性 #

所有行显示0，说明row.problems.length取值异常，需排查数据结构：

• 在cell函数中添加日志，确认行数据是否符合预期：

  cell: (row) => {
      console.log('当前行数据:', row); // 查看problems数组和problemStatusWarningLevel的实际值
      // 后续渲染逻辑
  }
  

• 确保row.problems是数组类型，避免因非数组调用length导致显示0；同时确认row.problemStatusWarningLevel是有效数值，防止判断条件失效。

3. 优化cell渲染逻辑 #

增加数据容错处理，同时优化图标与数值的排版：

cell: (row) => {
    // 容错处理：确保problems是数组，避免length报错
    const problemCount = Array.isArray(row.problems) ? row.problems.length : 0;
    // 校验预警等级的类型与值
    const showWarning = typeof row.problemStatusWarningLevel === 'number' && row.problemStatusWarningLevel > 0;

    return (
        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
            {problemCount}
            {showWarning && <FontAwesomeIcon icon={faTriangleExclamation} style={{ color: '#ffc107' }} />}
        </div>
    );
}

4. 确认selector与cell的配合 #

selector: 'problems.length'主要用于排序逻辑，当使用cell自定义渲染时，渲染内容以cell函数返回结果为准，但仍需确保problems.length的取值逻辑和cell中一致，避免排序结果与显示内容不符。

内容的提问来源于stack exchange，提问作者norimicy