有人可以解释一下 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
.
让我们分解一下。请记住,我们的 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
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
.
让我们分解一下。请记住,我们的 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