React JSX中如何根据ratio列≥0.96的条件高亮表格对应行

你只需要修改表格<tbody>部分渲染<tr>标签的逻辑，根据当前行的ratio值动态设置样式即可，具体实现方案如下：

方案1：内联样式实现（无需额外写CSS，适合快速实现） #

直接给<tr>标签动态绑定style属性，判断ratio >= 0.96时添加红色高亮样式，修改后的tbody代码如下：

<tbody>
  {tableData.map((rowData, index) => (
    // 这里增加条件判断，ratio大于等于0.96时添加红色背景高亮
    <tr 
      key={index}
      style={Number(rowData.ratio) >= 0.96 ? {
        backgroundColor: '#ffebee', // 浅红色背景
        color: '#b71c1c', // 深红色文字，提高显示对比度
      } : {}}
    >
      <td>{rowData.vin}</td>
      <td>{rowData.date}</td>
      <td> {rowData.invoice_price} </td>
      <td>{rowData.sold_price}</td>
      <td>{rowData.ratio}</td>
      <td>{rowData.customer_name}</td>
      <td>{rowData.salesperson}</td>
    </tr>
  ))}
</tbody>

注：这里加Number()转换是为了避免接口返回的ratio是字符串类型，导致比较逻辑出错，如果你确认接口返回的是数字类型可以去掉

方案2：CSS类名实现（适合样式复杂、需要复用的场景） #

1. 先在你的样式文件中添加高亮类：

.highlight-red-row {
  background-color: #ffebee;
  color: #b71c1c;
}

2. 再修改<tr>的className属性即可：

<tr 
  key={index}
  className={Number(rowData.ratio) >= 0.96 ? 'highlight-red-row' : ''}
>

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