所以我基本上已经有一周的时间做出反应并且多年没有编写任何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>
答案 0 :(得分:1)
我基本上想要根据用户选择来渲染组件
最简单的方法是
{ this.state.selection === 1 && <CreatedDate ... /> }
{ this.state.selection === 2 && <ClientSignedDate ... /> }
等等。
编辑:根据其他信息,另一个选项是:
const dateOptions = [CreatedDate, ClientSignedDate, VerificationDate];
const Comp = dateOptions[this.state.selection]; // pick element
然后使用
<Comp
from={this.props.filter.createdDateFrom}
to={this.props.filter.createdDateTo}
onChange={this.handleCreatedDateChange}
/>
答案 1 :(得分:0)
用户定义的组件必须大写才能呈现它们。
试试:
<select>{dateOptions.map(Option => <option><Option /></option>)}</select>
另请注意为key
元素设置option
属性。
答案 2 :(得分:0)
React组件必须为大写。从那里你可以使用变量组件。
我最近提到了帮助我的this question。这不完全是你所要求的,但它源于同样的问题。 This question也是如此。
<select>{dateOptions.map((Option, index) => <option key={`unique_${index}`}><Option /></option>)}</select>
使用key
时,请确保Array.map
是唯一的。如果动态添加/删除Option
组件,则在某些情况下使用简单的数组索引可能会遇到问题。详细了解here。