ReactJS中的dynamic属性

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

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

这会由于“{”字符而引发parsing错误。 如何根据AppStore.cartIsEmpty()的(boolean)结果包含/省略disabled属性?

添加可选属性(包括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 , 这个答案效果很好。

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

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

更干净的方式做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属性

你可以在文档中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,但我有你的想法。

这很酷,因为你可以将许多其他属性传递给这个组件,它仍然可以工作。

我正在使用React 16,这适用于我( bool是你的testing):

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

基本上,基于testing( bool )你返回一个对象的属性或返回一个空的对象。

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

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

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

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

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