如果满足特定条件,是否有办法仅将属性添加到 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 足够聪明,可以忽略该属性。例如:
const InputComponent = function() {
const required = true;
const disabled = false;
return (
<input type="text" disabled={disabled} required={required} />
);
}
将导致:
<input type="text" required>
更新:如果有人对这种情况的发生方式 / 原因感到好奇,可以在 ReactDOM 的源代码中找到详细信息,特别是在DOMProperty.js文件的第 30和167 行。
juandemarco 的答案通常是正确的,但这是另一种选择。
随心所欲地建立物件:
var inputProps = {
value: 'foo',
onChange: this.handleChange
};
if (condition)
inputProps.disabled = true;
以传播方式渲染,也可以选择通过其他道具。
<input
value="this is overridden by inputProps"
{...inputProps}
onChange={overridesInputProps}
/>
这是通过React-Bootstrap (版本 0.32.4)使用 Bootstrap的Button
var condition = true;
return (
<Button {...(condition ? {bsStyle: 'success'} : {})} />
);
根据条件,将返回{bsStyle: 'success'}
或{}
然后,散布运算符会将散布的返回对象的属性散布到Button
组件。在虚假情况下,由于返回的对象上不存在任何属性,因此不会将任何内容传递给组件。
根据安迪 · 波希尔(Andy Polhill)的评论的另一种方法:
var condition = true;
return (
<Button bsStyle={condition ? 'success' : undefined} />
);
唯一的小不同是,在第二个示例中,内部组件<Button/>
的props
对象将具有值为 b 的bsStyle
undefined
。