Javascript 如何根据单元格中的值更改表中的背景（react）

表组件从父级接收数据并对其进行组织。检索表后，该表将再次填充数据

如何根据单元格中的值更改每个单元格的背景（使用css样式？）

从“React”导入React；
导入“../layouts/table.css”
常数表=（道具）=>{
让数据=道具数据
让表=[
[“城市”、“so2”、“no2”、“pm25”、“pm10”、“o3”、“co”]，
["2", "150", "1", "2", "5", "9", "10"],
["2", "250", "1", "2", "5", "9", "10"],
["2", "350", "1", "2", "5", "9", "10"],
["2", "450", "1", "2", "5", "9", "10"],
["2", "2", "1", "2", "5", "9", "10"],
["2", "10", "1", "2", "5", "9", "10"],
["2", "10", "1", "2", "5", "9", "10"],
["2", "10", "1", "2", "5", "9", "10"],
["2", "0", "1", "2", "5", "9", "10"],
]
for（设i=0；i
{表[0]}
{表[1]}
{表[2]}
{表[3]}
{表[4]}
{表[5]}
{表[6]}
)
返回(
城市
二氧化硫
二号
pm25
pm10
臭氧
有限公司
{row}
);
}
导出默认表；

您可以使用以下内容：

const row = table.map((table) =>
    <tr>
        <td scope="row" key={table[0][0]}>{table[0]}</td>
        <td id="so2" style={{ color: table[1] != "soe2" ? 'blue': 'green'}}>{table[1]}</td>
        <td id="no2" style={{ color: table[2] != "soe2" ? 'blue': 'green'}}>{table[2]}</td>
        <td id="pm24" style={{ color: table[3] != "soe2" ? 'blue': 'green'}}>{table[3]}</td>
        <td id="pm10" style={{ color: table[4] != "soe2" ? 'blue': 'green'}}>{table[4]}</td>
        <td id="o3" style={{ color: table[5] != "soe2" ? 'blue': 'green'}}>{table[5]}</td>
        <td id="co" style={{ color: table[6] != "soe2" ? 'blue': 'green'}}>{table[6]}</td>
    </tr>
)

const row=table.map（（table）=>
{表[0]}
{表[1]}
{表[2]}
{表[3]}
{表[4]}
{表[5]}
{表[6]}
)

如果只有两种颜色，这是一个很好的解决方案。如何使用三种颜色？你可以使用它并扩展它，使其成为你想要的颜色。colorMe（value）{let class=”“；if（value==）{class=“您需要的颜色。”}返回类}{表[1]}没有问题。请把答案标为正确，投票也不会有什么坏处

const row = table.map((table) =>
    <tr>
        <td scope="row" key={table[0][0]}>{table[0]}</td>
        <td id="so2" style={{ color: table[1] != "soe2" ? 'blue': 'green'}}>{table[1]}</td>
        <td id="no2" style={{ color: table[2] != "soe2" ? 'blue': 'green'}}>{table[2]}</td>
        <td id="pm24" style={{ color: table[3] != "soe2" ? 'blue': 'green'}}>{table[3]}</td>
        <td id="pm10" style={{ color: table[4] != "soe2" ? 'blue': 'green'}}>{table[4]}</td>
        <td id="o3" style={{ color: table[5] != "soe2" ? 'blue': 'green'}}>{table[5]}</td>
        <td id="co" style={{ color: table[6] != "soe2" ? 'blue': 'green'}}>{table[6]}</td>
    </tr>
)