React Table根据单元格值设置样式失效，求解决方案

看起来你踩了React Table v7的一个常见小坑——你在列配置里用的getProps并不是这个版本里列的有效配置项，所以才会没效果。下面给你两种实用的解决方案，不管是直接设置行内样式还是添加自定义className都能搞定：

方案一：自定义列的cell渲染函数（最直观） #

直接在列配置里通过cell属性返回带有样式的单元格，这样可以直接拿到单元格的值来判断，代码也更清晰：

const columns = [
  {
    Header: 'Things to Do',
    accessor: 'item',
    // 这里的参数里value就是当前单元格的值，row可以拿到整行数据
    cell: ({ value }) => (
      <td style={{ backgroundColor: value === 'Do a thing' ? 'red' : 'transparent' }}>
        {value}
      </td>
    )
  },
  {
    Header: '2020-04-01',
    accessor: 'date.2020-04-01',
    cell: ({ value }) => (
      <td style={{ backgroundColor: value === 'Y' ? 'red' : 'transparent' }}>
        {value}
      </td>
    )
  },
]

如果想用自定义className代替行内样式，只需要把style换成className就行：

cell: ({ value }) => (
  <td className={value === 'Y' ? 'highlight-red' : ''}>
    {value}
  </td>
)

然后在CSS里定义这个类：

.highlight-red {
  background-color: red;
}

方案二：渲染时合并单元格Props（保留原有逻辑） #

如果你不想改动列配置结构，想继续用cell.getCellProps()的逻辑，可以在渲染<td>的时候，把自定义样式和React Table生成的Props合并：

首先可以写个辅助函数来判断样式：

const getCellCustomProps = (cell) => {
  let style = {};
  switch(cell.column.accessor) {
    case 'item':
      style.backgroundColor = cell.value === 'Do a thing' ? 'red' : 'transparent';
      break;
    case 'date.2020-04-01':
      style.backgroundColor = cell.value === 'Y' ? 'red' : 'transparent';
      break;
    default:
      break;
  }
  return { style };
};

然后修改表格渲染里的单元格部分：

{row.cells.map(cell => {
  // 合并React Table的props和自定义props
  const combinedProps = {
    ...cell.getCellProps(),
    ...getCellCustomProps(cell)
  };
  return <td {...combinedProps}>{cell.render('Cell')}</td>
})}

小提示 #

React Table会自动解析accessor: 'date.2020-04-01'这种嵌套路径，所以cell.value直接就能拿到对应的值，不用再手动从rowInfo.row里嵌套访问，能省不少代码~

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