ReactJS中的动态属性

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

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

由于出现了“ {”字符，因此引发了解析错误。如何基于AppStore.cartIsEmpty（）的（布尔值）结果包含/忽略禁用的属性？

添加可选属性（包括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在这种情况下为值）。disabledHello

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

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

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

我正在使用React 16，这对我有用（bool您的测试在哪里）：

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

基本上，基于测试（bool），您将返回具有属性的对象，或者返回空对象。

另外，如果您需要添加或省略多个属性，则可以执行以下操作：

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

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

适用于任何属性的更动态的动态属性处理方式是

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

像下面这样调用您的react组件

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

提示 ：

1. 您可以dynamicAttributes在通用的地方/工具中使用功能，然后将其导入以在所有组件中使用

2. 您可以传递值null以不呈现动态属性

您可以在文档中找到与此类似的内容。

https://facebook.github.io/react/docs/transferring-props.html

在你的情况下可能是这样的

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

这段代码使用的是ES6，但我想你明白了。

这很酷，因为您可以将许多其他属性传递给此组件，并且它仍然可以工作。

我使用的版本是：

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

一种简单而干净的方法

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

残疾人应该来自这样的道具

<MyComponent disabled />

比公认的解决方案还干净得多的是AnilRedshift提到的解决方案，但我将继续进行扩展。

简而言之，HTML属性具有名称和值。作为简写，您只能将名称用于“ disabled”，“ multiple”等。但是，简写仍然可以使用，并且允许React以其首选方式工作。

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

首先，您可以简单地检查

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

注意：**禁用的值不是String，它应该是Boolean。

现在动态。你可以简单地写

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

如您所见，我正在使用禁用的属性，并且在大括号中可以是局部变量/状态var。该变量disable包含值true / false。

这可以工作，禁用的问题是不能简单地为其设置布尔值。

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}