根据州添加不同的 class

Question

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

例如：

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

使用 SCSS：

.colors {
    padding: 10px;

    &.green {
        background-color: green;
    }
 }

如果 value 大于 0，

将使 background-color 变为绿色。但是我如何转换它，以便如果 value 为零，则 neutral class 加上 background-color 灰色，红色 class 加上 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}</>

根据州添加不同的 class

Add different class depending on state

conditional-statements

reactjs