如何使用javascript和react根据数字的值更改数字的颜色？

我想使用javascript根据变量的值将颜色应用于变量count

我想做什么？ 变量计数的值是动态的，它的值可以小于0或大于0

那么现在当计数值为

0 color should be red
1 color should be yellow
greater than 1 color should be green
less than 0 meaning negative integers like -1, -2 so on color should be grey

我有下面的代码，它根据值更改颜色

const countColor = (count: number) => {
    const colors = [red, yellow];
    return colors[count] || green;
}; 

因此，上述代码适用于0、1和大于1的计数值。如何更改上述代码，使其在值小于0时处理或将计数值更改为灰色

---

有人能帮我修一下吗。谢谢。

如果

count

小于零，则使用返回

灰色的terrnary运算符，否则返回
颜色[计数]
或
绿色
如果
颜色[计数]
未定义

const countColor = (count: number) => {
    const colors = ['red', 'yellow'];
    return count < 0 ? 'grey' : (colors[count] || 'green');
}; 

const countColor=（count:number）=>{
常量颜色=['红色'，'黄色']；
返回计数<0？“灰色”：（颜色[计数]| |“绿色”）；
}; 

一种简单的方法是忘记

[红色，黄色]

数组，只处理count以返回颜色：

const countColor = (count: number) => {
    if (count < 0) return grey;
    else if (count > 1) return green;
    else if (count === 0) return red;
    else if (count === 1) return yellow;
}; 

const countColor=（count:number）=>{
如果（计数<0）返回灰色；
如果（计数>1），则返回绿色；
如果（计数==0），则返回红色；
否则如果（计数===1）返回黄色；
}; 

使用简单的

if

语句有什么不对？这只会让代码读起来非常混乱。记住，不仅是机器，还要为人类编码。另一个阅读此代码的开发人员将需要大量的心理处理能力，才能看到此处试图实现的简单目标。此代码如何难以阅读？它是一个简单的三元运算符，如果

count

小于零，则返回

colors[count]

或

green

如果

colors[count]

未定义。它是三元运算符的组合，带有转换为数组的if语句，顶部是默认的回退。简单的

if

语句有什么错？不要试图在他那令人困惑的代码上再进一步。帮助他明白答案要简单得多，因为他可能从一个教程中得到了自己的狙击手。如果他的代码让你感到困惑，我不知道该怎么对你说。我甚至会争辩说没有默认的

else

，而是将最后的

else

也转换为

else if

，为了清晰起见。我们也可以对它们进行排序并添加注释，但我希望最后一个

足够清晰，否则如果
：）