javascript - 如何有条件地向React组件添加属性?

如果满足某个条件,是否有一种方法只向react组件添加属性?
我应该在呈现后基于Ajax调用向表单元素添加必需的和只读的属性,但是我看不到如何解决这个问题,因为readonly=“false”与完全忽略属性不同。
下面的示例应该解释我想要什么,但不起作用(分析错误:意外的标识符)。

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