如何有条件地向React组件添加属性？
有没有办法只添加属性到一个React组件，如果满足某些条件？
我应该添加必要和readOnly属性基于ajax调用渲染后形成元素，但我不明白如何解决这个，因为readOnly =“false”是不完全相同的省略属性。
下面的例子应该解释我想要什么，但不会工作（parsing错误：意外的标识符）。
var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); }, render: function () { var isRequired = this.state.isRequired; return ( <MyOwnInput name="test" {isRequired ? "required" : ""} /> ); } }); 显然，对于某些属性，如果传递给它的值不真实，React足够聪明，可以忽略该属性。 例如：
var InputComponent = React.createClass({ render: function() { var required = true; var disabled = false; return ( <input type="text" disabled={disabled} required={required} /> ); } });
将导致：
<input type="text" required data-reactid=".0.0">
只是抛出另一个选项，但@ juandemarco的答案通常是正确的。
build立一个你喜欢的对象：
var inputProps = { value: 'foo', onChange: this.handleChange }; if (condition) inputProps.disabled = true;
渲染与传播，也可以通过其他道具。
<input value="this is overridden by inputProps" {...inputProps} onChange={overridesInputProps} />
这里是通过React-Bootstrap使用Bootstrap的Button一个例子。
var condition = true; return ( <Button {...condition ? {bsStyle: 'success'} : {}} /> );
晚会到了晚会 这是一个替代scheme。
var condition = true; var props = { value: 'foo', ...( condition && { disabled: true } ) }; var component = <div { ...props } />;
或者它的内联版本
var condition = true; var component = ( <div value="foo" { ...( condition && { disabled: true } ) } /> );
您可以使用相同的快捷键，用于添加/删除（部分）组件（ {isVisible && <SomeComponent />} ）。
class MyComponent extends React.Component { render() { return ( <div someAttribute={someCondition && someValue} /> ); } }
晚会到了晚会
假设我们想要添加一个自定义属性（使用aria- *或data- *），如果条件为真：
{...this.props.isTrue && {'aria-name' : 'something here'}}
比方说，如果条件为真，我们想添加一个样式属性：
{...this.props.isTrue && {style : {color: 'red'}}}
如果你使用es6，你可以像这样写。
// first, create a wrap object. const wrap = { [variableName]: true } // then, use it <SomeComponent {...{wrap}} />
这应该是有效的，因为你的状态会在ajax调用之后改变，父组件将会重新渲染。
render : function () { var item; if (this.state.isRequired) { item = <MyOwnInput attribute={'whatever'} /> } else { item = <MyOwnInput /> } return ( <div> {item} </div> ); }
考虑到这个posthttps://facebook.github.io/react/tips/if-else-in-JSX.html你可以这样解决你的问题
if (isRequired) { return ( <MyOwnInput name="test" required='required' /> ); } return ( <MyOwnInput name="test" /> );
