React如何根据status值在td列显示布尔文本并设置颜色

方式一：三元表达式直接实现（简洁直观） #

JSX的表达式语法（{}）内不支持直接使用if语句，改用三元表达式完成条件判断，同时通过内联样式设置文字颜色：

<td className="px-6 py-4" style={{ color: task.status === "1" ? "green" : "inherit" }}>
  {task.status === "1" ? "true" : "false"}
</td>

方式二：提取逻辑为变量/函数（适合复杂场景） #

如果后续需要扩展状态相关逻辑，可将判断逻辑抽离，让代码更易维护：

提取为变量

// 在组件渲染逻辑前定义变量
const statusDisplay = task.status === "1" ? "true" : "false";
const statusColor = task.status === "1" ? "green" : "inherit";

// 渲染<td>
<td className="px-6 py-4" style={{ color: statusColor }}>
  {statusDisplay}
</td>

提取为函数

// 定义独立的渲染函数
const renderStatus = (status) => {
  if (status === "1") {
    return <span style={{ color: "green" }}>true</span>;
  }
  return "false";
};

// 在<td>中调用函数
<td className="px-6 py-4">
  {renderStatus(task.status)}
</td>

关键说明 #

JSX的{}语法仅支持表达式（能返回值的代码片段），不支持if这类语句，因此需要通过三元表达式、函数调用或变量赋值的方式实现条件渲染逻辑。

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