reactjs - ReactJS 中的动态属性

Question

我想动态地包含/省略按钮元素上的禁用属性。我见过很多动态属性值的例子，但没有见过属性本身。我有以下渲染函数:

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

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

Answer 1

添加可选属性(包括 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'));

通过使用扩展属性，您可以使用 JavaScript 对象实例动态添加(或覆盖)您想要的任何属性。在上面的示例中，代码创建了 disabled键(在本例中为 disabled 值)，当 disabled 时属性传递给Hello组件实例。

如果您只想使用disabled不过，this答案效果很好。