ReactJs在条件下改变类

Question

我正在学习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>
);

想知道+= 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";

Answer 1

这是工作中的三元算子

这一逻辑相当于：

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

Answer 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>
);

Answer 3

看起来，您可能缺少一个设置状态的增量函数。看这一节：

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

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

三元算子首先工作，其结果是

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

被添加到类中。