ReactJS中的动态属性

Question

我想在按钮元素上动态包含/省略disabled属性.我已经看到了很多动态属性值的例子,但没有看到属性本身的例子.我有以下渲染功能:

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

由于"{"字符,这会引发解析错误.如何根据AppStore.cartIsEmpty()的(boolean)结果包含/省略disabled属性？

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

通过使用spread属性,您可以使用javascript对象实例动态添加(或覆盖)您想要的任何属性.在上面的示例中,代码在将属性传递给组件实例时创建一个disabled键(disabled在本例中为值).disabledHello

如果您只想使用disabled,这个答案很有效.

Answer 2

您可以将布尔值传递给disabled属性.

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

Answer 3

我正在使用React 16,这适合我(bool你的测试在哪里):

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

基本上,基于test(bool),您返回具有该属性的对象,或者返回一个空对象.

此外,如果您需要添加或省略多个属性,您可以执行以下操作:

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

对于更精细的属性管理,我建议您使用(或不使用)JSX之外的属性预制对象.

Answer 4

一种简单干净的方法

<button {...disabled && {disabled: true}}>Clear cart</button>

禁用应该来自这样的道具

<MyComponent disabled />

Answer 5

我使用的版本是：

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

Answer 6

AnilRedshift 提到的解决方案比公认的解决方案要干净得多，但我将对其进行扩展。

简单地说，HTML 属性有一个名称和一个值。作为简写，您只能将名称用于“禁用”、“多个”等。但简写版本仍然有效，并允许 React 以其首选方式工作。

disabled={disabled ? 'disabled' : undefined} 是最清晰的解决方案。