ReactJS根据用户选择渲染组件

Question

我基本上是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>

- shashwatZing

---

你的问题本质上是在询问如何渲染动态组件，而不仅仅使用静态JSX吗？这就是我理解你的问题的方式。 - user5734311

我想根据用户选择的内容呈现不同的组件，这些组件可以接收相同的 props。 - shashwatZing

Answer 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}
/>

- user5734311

---

有人在没有任何反馈的情况下对这里的所有答案进行了负面评价。感谢您的意见，我还没有机会查看这个问题。 - shashwatZing

谢谢，我已经看完了你的代码。这真的很整洁。 - shashwatZing

我实际上给另外两个答案投了反对票，因为他们没有理解你的问题，所以给出了无用的答案。我的回答也被一个显然没有理解它的人投了反对票。既然你告诉了hsz他的解决方案完美地工作，我就想知道为什么你要把一个带有函数和属性等内容的组件放在<option>元素中。我将你的示例代码解释为一般动态渲染的示例，并假设这实际上与<option>内容无关。难道我错了吗？ - user5734311

Answer 2

自定义组件必须大写才能渲染它们。

只需尝试：

<select>{dateOptions.map(Option => <option><Option /></option>)}</select>

此外，请记得为元素设置key属性。

- hsz

---

有人在没有任何反馈的情况下对这里的所有答案进行了负面评价。感谢您的意见，我还没有机会查看这个问题。 - shashwatZing

@shashwatZing 没问题。 - hsz

Answer 3

React组件必须大写。从那里，您可以使用变量组件。

我最近参考了这个问题，它帮助了我。虽然不完全是你所问的，但它源于同样的问题。这个问题也是如此。

<select>{dateOptions.map((Option, index) => <option key={`unique_${index}`}><Option /></option>)}</select>

在使用Array.map时，确保您的key是唯一的。如果您动态添加/删除Option组件，在某些情况下仅使用简单的数组索引可能会遇到问题。了解更多这里。

- domdambrogia

---

有人在没有任何反馈的情况下对这里的所有答案进行了负面评价。感谢您的意见，我还没有机会查看这个问题。 - shashwatZing

哈哈，不用担心。如果你最终使用了它，请告诉我是否遇到任何问题。 - domdambrogia