根据状态添加不同的类

Question

我有一个需要某种background-color的div。颜色取决于div中的值，该值可以为负、零或正。

例如:

<div className={`colors ${value > 0 ? "green" : ""}`}>{value}</div>

与SCSS:

.colors {
padding: 10px;
&.green {
background-color: green;
}
}

如果value

大于0，会使background-color变绿。但是我怎么能改变这一点，如果value是零，然后添加一个neutral类与background-color灰色，和一个红色类与background-color红色如果是负的。

Answer 1

你非常接近三进制;您可以通过在模板中实现嵌套的三元语句轻松解决这个问题。假设你有三个CSS类:green表示正，red表示负，neutral表示0。

可以创建一个嵌套的三元值来匹配所有操作，如下所示:

value > 0
? "green" // positive, make it green
: value < 0
? "red" // negative, it's red
: "neutral" // it's neither positive nor negative; it's 0; make it neutral

在JSX中，它看起来像:

<div className={`colors {
value > 0
? "green"
: value < 0
? "red"
: "neutral"
}`>{value}</div>

Answer 2

同样，你也可以这样做:

const bgColor = new Map([
[false, "negative"],
[true, "positive"],
[0, "neutral"],
]);
<div className={`colors ${bgColor.get(value)}`}>{value}</>