React中如何根据对象属性值动态修改表格行的背景颜色

你基于react-table封装的组件不需要修改原有结构，直接用库的原生属性注入样式即可，操作如下：

• 首先注意接口返回的group[0].value为字符串格式，判断前需转为数字，避免字符串比较出现逻辑错误
• 若需给符合条件的整行设置绿色背景，在渲染行节点时通过getRowProps传入自定义样式：

// 仅展示行渲染部分的代码，其余原有逻辑保持不变
{rows.map((row) => {
  prepareRow(row)
  const rating = Number(row.original.group[0].value)
  return (
    <tr 
      {...row.getRowProps({
        style: {
          backgroundColor: rating > 30 ? 'green' : 'transparent'
        }
      })} 
    >
      {row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render('Cell')}</td>)}
    </tr>
  )
})}

• 若你的表格是单行多列、每个单元格对应x数组的一个元素，只需给对应单元格注入样式即可：

// 在对应列的配置中修改Cell属性即可，其余原有逻辑保持不变
const columns = [
  {
    Header: '你的列名',
    accessor: 'name',
    Cell: ({ cell }) => {
      const rating = Number(cell.row.original.group[0].value)
      return (
        <td 
          {...cell.getCellProps({
            style: {
              backgroundColor: rating > 30 ? 'green' : 'transparent'
            }
          })}
        >
          {cell.value}
        </td>
      )
    }
  }
]

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