代码之家 › 专栏 › 技术社区 › shashwatZing

基于用户选择的ReactJS渲染组件

redux reactjs html javascript

shashwatZing · 技术社区 · 6 年前

所以我基本上已经一周大了,没有写任何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和验证所有包含基本相同输入属性但从同一表的不同列获取数据的属性。

在名为filter的单独父类中我在这个类中创建了一个这些组件的数组

const-dateOptions=[创建日期,客户端签名日期,验证日期];

它以前在只有一个组件的情况下工作

          <CreatedDate
            from={this.props.filter.createdDateFrom}
            to={this.props.filter.createdDateTo}
            onChange={this.handleCreatedDateChange}
          />

我基本上想基于用户选择来呈现组件,但是我不知道怎么做。类似于下面的片段,但允许呈现。

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

3 回复 | 直到 6 年前

ChrisG 6 年前

我基本上想基于用户选择呈现组件

最简单的方法是

{ 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 6 年前

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

尝试一下:

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

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

domdambrogia 6 年前

反应组件必须为大写。从这里可以使用变量组件。

我最近引用了 this question 这帮了我的忙。这不完全是你所要求的,但它是由同一个问题引起的。 This question 也。

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

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

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

2 年前

universe11 · 对伊默来说,这是正确的还是错误的?

2 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

2 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

2 年前

geyser · React Redux toolkit-输入字段的状态管理

2 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

2 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

2 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

3 年前