如何有条件地向React组件添加属性? [英] How to conditionally add attributes to React components?
问题描述
如果满足某个条件,是否只能向React组件添加属性?
Is there a way to only add attributes to a React component if a certain condition is met?
我应该为表单元素添加required和readOnly属性基于渲染后的ajax调用,但我看不出如何解决这个问题,因为readOnly =false与完全省略属性不同。
I'm supposed to add required and readOnly attributes to form elements based on an ajax call after render, but I can't see how to solve this since readOnly="false" is not the same as omitting the attribute completely.
下面的示例应该解释我想要的,但不会工作(解析错误:意外的标识符)。
The example below should explain what I want, but wont work (Parse Error: Unexpected identifier).
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足够智能化如果传递给它的值不是真的,则省略该属性。例如:
Apparently, for certain attributes, React is intelligent enough to omit the attribute if the value you pass to it is not truthy. For example:
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">
这篇关于如何有条件地向React组件添加属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!