ReactJS 中的动态属性

Question

我想在按钮元素上动态包含/省略 disabled 属性。我见过很多动态属性值的例子，但不是属性本身。我有以下渲染功能：

 render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

由于“{”字符，这会引发解析错误。如何根据 AppStore.cartIsEmpty() 的（布尔）结果包含/省略 disabled 属性？

原文由 Timmy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加可选属性（包括 disabled 以及您可能想要使用的其他属性）的最简洁方法目前是使用 JSX 传播属性：

 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'));

通过使用扩展属性，您可以使用 javascript 对象实例动态添加（或覆盖）您想要的任何属性。 In my example above, the code creates a disabled key (with a disabled value in this case) when the disabled property is passed to the Hello 组件实例。

但是，如果您只想使用 disabled ， 则此 答案效果很好。

原文由 WiredPrairie 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我正在使用 React 16，这对我有用（其中 bool 是你的测试）：

 <fieldset {...(bool && {disabled:true})}>

基本上，基于测试（ bool ），你返回一个具有条件属性的对象，或者你不返回。

此外，如果您需要添加或省略多个属性，您可以这样做：

 <fieldset {...(bool && {disabled:true, something:'123'})}>

对于更精细的属性管理，我建议您使用（或不使用）JSX 之外的属性预制对象。

原文由 Luke 发布，翻译遵循 CC BY-SA 4.0 许可协议