有人可以解释一下 React 中这两个 if 条件之间的区别吗?

Can someone explain me the difference between both this if conditions in React?

state = {
    count: 1,
  };
    
render() {
    let classes = "badge m-5 bg-";
    let { count } = this.state;

    count === 1 ? (classes += "success") : (classes += "warning");//1st Condition
    classes+= (count===1)?"success" : "warning";//2nd Condition
    
    return (
      <div className="container">
        <span style={this.styles} className={classes} id="bad">
          Hello!
        </span>
       </div>
    );
  }

我了解 if 条件是如何工作的(condition ? true: false),但在第二个条件中,即使在放置 classes+= 之后甚至在提及条件之前它可能如何工作?

在第二个条件中,tt 与 javascript operator precedence 相关。 ?:+= 之前

在 Javascript 中,三元运算符 (?...:) 优先于赋值 (+=),因此 += 的右手首先解析并附加“成功”或“警告”到 classes.

参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table

让我们分解一下。请记住,我们的 count 初始值为 1.

let classes = "badge m-5 bg-";
...
classes+= (count===1)?"success" : "warning";

首先会发生的是 count===1 将被检查是否严格相等(它优先),这将产生 true。由于我们的条件为真,并且我们使用三元运算符,表达式 returns "success" 字符串,即

这个:

classes+= (count===1)?"success" : "warning";

变成这样:

classes+= "success";

"success" 将附加到 classes 字符串,因此 classes 将变为 badge m-5 bg-success