React & HTML：使用布尔值高亮表格单元格

你提到的需求完全可行，不过原生HTML的条件写法在React的JSX里不适用，得用React的语法来实现。下面给你两种常用的方案：

方案一：内联样式直接控制 #

在JSX中，样式需要以对象的形式传递，你可以通过三元表达式根据highlight状态动态设置单元格背景色：

import { useState } from 'react';

function HighlightableTable() {
  // 假设这是你的布尔状态变量
  const [highlight, setHighlight] = useState(false);

  return (
    <table border="1"> {/* 加border方便看效果 */}
      <tr>
        {/* 当highlight为true时设置红色背景，否则用默认样式 */}
        <td style={highlight ? { backgroundColor: 'red', color: 'white' } : {}}>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
      </tr>
    </table>
  );
}

方案二：通过CSS类名控制（更适合复杂样式） #

如果你的高亮样式比较复杂，推荐用CSS类来管理，这样代码更清晰：

首先定义CSS类：

.highlighted-cell {
  background-color: red;
  color: white;
  font-weight: bold;
}

然后在React组件中根据highlight状态动态添加类名：

<td className={highlight ? 'highlighted-cell' : ''}>Emil</td>

或者用更简洁的逻辑与写法（当highlight为true时才添加类名）：

<td className={highlight && 'highlighted-cell'}>Emil</td>

为什么你原来的写法不行？ #

React的JSX语法要求属性值必须是表达式，不能直接写{if (highlight) bgColor = 'red'}这种语句。所以我们需要用三元表达式、逻辑与这类表达式来处理条件判断~

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