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

时间:2017-09-05 09:04:54

标签: reactjs jsx

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

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

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

3 个答案:

答案 0 :(得分:4)

相应地更改您的代码

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

答案 1 :(得分:1)

使用disabled作为道具以及classNameusersOnCall.indexOf(user) > -1已经是一个布尔值,您不必返回truefalse

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

答案 2 :(得分:0)

放置您的条件而不是YOUR_CONDITION

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