ReactJS中的动态属性

Question

我想动态地在按钮元素上包含/忽略Disabled属性。我已经看到了许多有关动态属性值的示例，但没有看到属性本身的示例。我有以下渲染功能：

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

由于有“ {”字符，这将引发分析错误。如何基于AppStore.cartIsEmpty（）的（布尔值）结果包含/忽略禁用的属性？

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对象实例动态添加（或覆盖）所需的任何属性。在上面的示例中，当属性传递给组件实例时，代码创建了一个disabled键（disabled在这种情况下为值）。disabled``Hello