Question

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

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

这引发了一个解析错误，因为＆＃34; {＆＃34;字符。如何根据AppStore.cartIsEmpty（）的（boolean）结果包含/省略disabled属性？

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

通过使用spread属性，您可以使用javascript对象实例动态添加（或覆盖）您想要的任何属性。在上面的示例中，当disabled属性传递给disabled组件实例时，代码会创建disabled键（在这种情况下具有Hello值）。

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

Answer 2

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

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

Answer 3

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

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

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

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

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

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

Answer 4

使用适用于任何属性的动态属性的更简洁方法是

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

调用您的反应组件，如下所示

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

提示：

您可以在常用位置/实用程序中使用dynamicAttributes功能导入它以在所有组件中使用它
您可以将值作为null传递给不呈现动态属性

Answer 5

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

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，但我知道你的想法。

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

Answer 6

我使用的版本是：

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

Answer 7

比公认的解决方案更清洁的是AnilRedshift提到的解决方案，但我将对其进行扩展。

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

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

Answer 8

一种简单干净的方法

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

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

<MyComponent disabled />

Answer 9

首先，您可以简单地检查

<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。

Answer 10

这可能有效，禁用的问题是不能简单地为它设置布尔值。

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

ReactJS中的动态属性

10 个答案: