我基本上是React的新手,不会写JavaScript代码已经很多年了。所以如果有什么纰漏,请原谅我的无知。
问题 我已经创建了三个不同的组件类。
const CreatedDate = React.createClass({
displayName: 'CreatedDate',
propTypes: {
name: 'CreateDate',
from: React.PropTypes.string,
to: React.PropTypes.string,
format: React.PropTypes.string,
onChange: React.PropTypes.func
},
//剩下的代码和函数
同样地,我有一个类似于这个的叫做ClientSignedDate和VerificationDate的类,它们都包含基本相同的输入属性,但是从同一张表的不同列中获取数据。
在一个名为Filter的独立的ParentClass中,我已经在这个类中创建了一个这些组件的数组。
const dateOptions = [CreatedDate, ClientSignedDate, VerificationDate];
之前当只有一个组件时它是可以工作的。
<CreatedDate
from={this.props.filter.createdDateFrom}
to={this.props.filter.createdDateTo}
onChange={this.handleCreatedDateChange}
/>
我基本上希望根据用户选择来渲染组件,但是我无法弄清楚如何实现。类似下面的代码片段,但允许渲染。
<select>{dateOptions.map(x => <option>{x}</option>)}</select>