ReactJS中的dynamic属性

我想dynamic包括/省略button元素的禁用属性。 我已经看到了很多dynamic属性值的例子，而不是属性本身。 我有以下渲染function：

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

这会由于“{”字符而引发parsing错误。 如何根据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')); 

通过使用传播属性，您可以使用JavaScript对象实例dynamic添加（或覆盖）任何您想要的属性。 在我上面的示例中，当disabled属性传递给Hello组件实例时，代码将创build一个disabled键（在这种情况下具有disabled值）。

如果你只想使用disabled ， 这个答案效果很好。

Answer 2

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

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

Answer 3

更干净的方式做dynamic属性适用于任何属性是

 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)} /> 

提示 ：

1. 你可以在一个普通的地方/实用程序中使用dynamicAttributes函数，并将其导入到所有组件中

2. 您可以将值作为null传递给不dynamic属性

Answer 4

你可以在文档中find类似的东西。

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 5

我正在使用React 16，这适用于我（ bool是你的testing）：

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

基本上，基于testing（ bool ）你返回一个对象的属性或返回一个空的对象。

另外，如果你需要添加或省略多个属性，你可以这样做：

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

为了更详细的属性pipe理，我build议你在JSX之外预制对象（或不带）属性。

Answer 6

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

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