ReactJs根据条件更改类

如何解决ReactJs根据条件更改类

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

解决方法

这是工作中的ternary operator

此逻辑等效于：

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

,

尝试这种方式，我认为这将使代码更干净。

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

,

似乎您可能缺少设置状态的增量功能。查看本节：

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

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

三元运算符首先起作用，结果

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

已添加到课程中。