代码之家 › 专栏 › 技术社区 › Denver Dang

根据状态添加不同的类

conditional-statements reactjs

0

Denver Dang · 技术社区 · 3 年前

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

例如

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

使用SCSS:

.colors {
    padding: 10px;

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

会使 背景颜色 绿色,如果 value 高于0。但是,我如何才能将其转化为 价值 为零,则为 neutral 与一起上课 背景颜色 添加了灰色,并添加了一个红色类 背景颜色 红色,如果为阴性。

2 回复 | 直到 3 年前

1

code 3 年前

你非常接近三元;通过在模板中实现嵌套的三元语句,可以很容易地解决这个问题。假设您有三个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>

2

0

arthurseredaa 3 年前

此外,您可以尝试以下操作:

const bgColor = new Map([
  [false, "negative"],
  [true, "positive"],
  [0, "neutral"],
]);

<div className={`colors ${bgColor.get(value)}`}>{value}</>