如果满足特定条件,是否有办法仅向React组件添加属性?
我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于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>
更新: 如果有人对这种情况的发生方式/原因感到好奇,可以在ReactDOM的源代码中找到详细信息,特别是在DOMProperty.js文件的第30和167行。