如何在React JS中根据单元格Yes/No值设置HTML单元格样式

要实现根据单元格值动态设置背景色，核心是根据数据值条件渲染className属性，以下是具体修改方案：

1. 保留现有CSS样式 #

你定义的两类背景样式可以直接沿用，无需修改：

.background-green  {
    background-color: #009000;
    color: #ffffff;
}

.background-red  {
    background-color: #ff0000;
    color: #ffffff;
}

2. 修改表格渲染函数 #

在myTabledata函数中，针对每个需要变色的单元格，通过三元运算符判断值，动态绑定对应的CSS类：

export function myTabledata() {
    return dataset.map(data=> (
        <tr>
            <td>{data.sampleid}</td>
            {/* 根据单元格值判断，对应绑定样式类 */}
            <td className={data.sample1 === "Yes" ? "background-green" : "background-red"}>{data.sample1}</td>
            <td className={data.sample2 === "Yes" ? "background-green" : "background-red"}>{data.sample2}</td>
            <td className={data.sample3 === "Yes" ? "background-green" : "background-red"}>{data.sample3}</td>
            <td className={data.sample4 === "Yes" ? "background-green" : "background-red"}>{data.sample4}</td>
            <td className={data.sample5 === "Yes" ? "background-green" : "background-red"}>{data.sample5}</td>
        </tr>           
       )            
    );
}

3. 进阶优化（可选） #

如果后续需要支持更多状态值，建议用对象映射简化代码，避免重复编写判断逻辑：

export function myTabledata() {
    // 提前定义值与样式类的映射关系
    const statusClassMap = {
        "Yes": "background-green",
        "No": "background-red"
    };

    return dataset.map(data=> (
        <tr>
            <td>{data.sampleid}</td>
            <td className={statusClassMap[data.sample1]}>{data.sample1}</td>
            <td className={statusClassMap[data.sample2]}>{data.sample2}</td>
            <td className={statusClassMap[data.sample3]}>{data.sample3}</td>
            <td className={statusClassMap[data.sample4]}>{data.sample4}</td>
            <td className={statusClassMap[data.sample5]}>{data.sample5}</td>
        </tr>           
       )            
    );
}

修改完成后，每个单元格会根据自身的"Yes"/"No"值自动应用对应的背景色，完全实现条件式样式设置。

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