ReactJS 基于用户选择渲染组件

Posted 2023-02-21

【中文标题】ReactJS 基于用户选择渲染组件

【英文标题】：ReactJS rendering components based on user select

【发布时间】：2018-11-02 22:58:31

【问题描述】：

所以我基本上一周大就可以做出反应，并且多年来没有编写任何 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
          />

我基本上想根据用户的选择来渲染组件，但我不知道该怎么做。类似于下面的 sn-p 但允许渲染的东西。

 <select>dateOptions.map(x => <option>x</option>)</select>

【问题讨论】：

你是在问如何渲染动态组件，而不是只使用静态 JSX？我就是这么理解你的问题的。

我想根据用户选择的内容来渲染采用相同道具的不同组件。

【参考方案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
/>

【讨论】：

有人在没有任何反馈的情况下对这里的所有答案进行投票。感谢您的意见，我没有机会看到这个。

谢谢伙计。我能够通过你的代码。这真的很整洁。

我实际上对另外两个投了反对票，因为他们不明白你在问什么，因此给出了无用的答案。显然，我也被一个也不理解的人否决了。既然您告诉 hsz 他的解决方案运行良好，我想知道您到底为什么要在 <option> 元素中放置一个具有功能和属性的组件以及其他东西。我将您的示例代码解释为一般动态渲染的示例，并假设这实际上与<option> 内容无关。毕竟我错了吗？

【参考方案2】：

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

我最近引用了this question，它帮助了我。这不完全是您要问的，但它源于同一个问题。 This question 也是。

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

当您使用Array.map 时，请确保您的key 是唯一的。如果动态添加/删除Option 组件，在某些情况下使用简单的数组索引可能会遇到问题。阅读更多关于 here 的信息。

【讨论】：

有人在没有任何反馈的情况下对这里的所有答案进行投票。感谢您的意见，我没有机会看到这个。

哈哈不用担心。如果您最终使用它，如果遇到任何问题，请告诉我。

【参考方案3】：

用户定义的组件必须大写才能呈现它们。

试试看：

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

还要记住为option 元素设置key 属性。

【讨论】：

有人在没有任何反馈的情况下对这里的所有答案进行投票。感谢您的意见，我没有机会看到这个。

@shashwatZing 不用担心。