我想动态地包含/省略按钮元素上的disabled属性.我见过很多动态属性值的例子，但没有看到属性本身.我有以下渲染功能:
render: function() {
var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
return <button {maybeDisabled}>Clear cart</button>
}
由于"{"字符，这会引发分析错误.如何基于AppStore.cartIsEmpty()的(布尔)结果包括/忽略禁用的属性？
添加可选属性(包括disabled和您可能想要使用的其他属性)的最干净方法是当前使用JSX spread attributes:
var Hello = React.createClass({
render: function() {
var opts = {};
if (this.props.disabled) {
opts['disabled'] = 'disabled';
}
return <button {...opts}>Hello {this.props.name}</button>;
}
});
React.render((<div><Hello name="Disabled" disabled='true' />
<Hello name="Enabled" />
</div>)
, document.getElementById('container'));
通过使用spread属性，您可以通过使用javascript对象实例动态添加(或覆盖)任何想要的属性.在我上面的示例中，当disabled属性传递给Hello组件实例时，代码会创建一个disabled键(本例中为disabled值).
如果你只想用disabled，this答案很好.