如何编写if语句来判断jsx中是否显示属性答案

【问题标题】：How do I write an if statement to determine whether to display an attribute in jsx如何编写if语句来判断jsx中是否显示属性
【发布时间】：2016-10-29 18:38:07
【问题描述】：

这会引发错误。每个选项的意外令牌：

<input {eachOption===selectedValue?'checked="checked"':''} type="checkbox" name="checkme"/>

【问题讨论】：

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

替换为checked={eachOption === selectedValue}。

这应该可以解决问题。

但是，请确保您还将onChange 处理程序附加到复选框（作为您想在 React 中使用的任何其他输入），否则它可能不会像您预期的那样运行。

您应该使用 JSX 设置属性的值。

通过将checked 的值设置为false，这意味着复选框不会被选中。如果条件 (eachOption === selectedValue) 成立，则会为您选中复选框。

这是JSBin

【讨论】：

这行不通 - 请参阅我的回复答案如下：
它会起作用，但是您还需要添加一个 onChange 处理程序，因为所有 React 创建的输入都需要一个。
@SteveTomlin 请看这个例子facebook.github.io/jest/docs/tutorial-react.html它来自facebook并在他们的复选框中使用checked={boolean}。 JSX != HTML
@SteveTomlin 你用过 JSX 吗？这是一个完美运行此答案的示例：jsbin.com/cefogejono/edit?js,output
如果你想指定一个复选框的checked属性，你正在创建一个Controlled Component。这意味着该 DOM 节点的值将始终与某个变量保持一致，如果不指定实现此行为的 onChange 处理程序，用户实际上将无法自己修改它。