ReactJs根据条件更改类答案

【问题标题】：ReactJs Changing Class on conditionReactJs根据条件更改类
【发布时间】：2021-01-13 16:17:46
【问题描述】：

我正在学习 ReactJs 并提出了动态渲染类

 render() {
  let classes = "badge m-2 badge-";

  classes += this.state.count === 0 ? "warning" : "primary";

  
return (
  <div>
      
    <span  className={classes}>{this.formatCount()}</span>
    <button className="btn btn-secondary btn-sm">Increment</button>
  </div>
);

想知道 classes += this.state.count ===0 如何？ “警告”：“主要”；工作过

我的意思是 x += y;应该是 x = x + y；为什么要使用 this.state.count 添加类

我在这里应用的逻辑是

this.state.count === 0 ? classes = "badge m-2 badge-warning" : classes = "badge m-2 badge-primary";

【问题讨论】：

x += y;和 x = x + y 都是一样的，将 x 添加到 y 并将其分配给 x，参考下面的链接，它可以帮助您进一步理解 Javascript 中的运算符：只是 x += y 是一种更短的方式； w3schools.com/js/js_operators.asp

标签： css reactjs dynamic

【解决方案1】：

这是工作中的ternary operator

这个逻辑等价于：

if(this.state.count === 0)
    classes += "warning";
    // classes = "badge m-2 badge-warning"
else
    classes += "primary";
    // classes = "badge m-2 badge-primary"

【讨论】：

【解决方案2】：

试试这个方法，我觉得这样可以让代码干净。

return (
<div>
     <span  className={`badge m-2 badge-${this.state.count === 0 ? "warning" : "primary"}`}>{this.formatCount()}</span>
    <button className="btn btn-secondary btn-sm">Increment</button>
  </div>
);

【讨论】：

您好，欢迎来到 StackOverflow，请提供有关您的代码为什么或如何工作的更多详细信息。祝你好运

【解决方案3】：

看起来您可能缺少设置状态的增量函数。查看此部分：

classes += this.state.count === 0 ? "warning" : "primary";

您使用 this.state.count 接收状态，并使用三元运算符在“warning”和“primary”之间切换。在另一个文件中，可能有一个事件处理函数，它将确定事件触发时的状态设置。

三元运算符先行，结果

this.state.count === 0 ? "warning" : "primary";

被添加到类中。

【讨论】：