在ReactJS中有条件地添加JSX属性

Question

所以我在JSX中有这个按钮：

<button className="btn btn-primary" {usersOnCall.indexOf(user) > -1 ? "disabled" : ""}></button>

我希望在条件为真时禁用该按钮，我尝试了上面的代码，但它没有工作。任何人都可以给我一个建议怎么做？非常感谢！

Answer 1

相应地更改您的代码

<button className="btn btn-primary" disabled={usersOnCall.indexOf(user) > -1 ? true : false}></button>

或者你可以缩短

<button className="btn btn-primary" disabled={(usersOnCall.indexOf(user) > -1)}></button>

更新@Chris的评论

ES6选项：

<button className="btn btn-primary" disabled={usersOnCall.includes(user)}></button>

Answer 2

使用disabled作为道具以及className。 usersOnCall.indexOf(user) > -1已经是一个布尔值，您不必返回true或false

<button
  className="btn btn-primary"
  disabled={usersOnCall.indexOf(user) > -1}
></button>

Answer 3

放置您的条件而不是YOUR_CONDITION。

<button
  disabled={YOUR_CONDITION}>
</button>