Question

我希望能够根据select元素中选择的值生成一定数量的组件（所有类似组件）。

我试图通过创建一个尺寸为所选数字的组件数组来生成此代码。当我选择一个数字时，它将启动一个句柄功能，该功能会在创建中更改所选数字。

handle = selected => {
  this.state.number= selected.value;
  this.forceUpdate();
};

render() {
  return( 
   <Select onChange={this.handle} options = { ... }/>
   {[...Array(this.state.number)].map(e => { return ( <TestComponent /> 
); })}
  )
}

它加载第一个组件，因为该数字已初始化为1，但是当我选择另一个数字2,3,4,5,...时，它不会呈现新组件。

Answer 1

您可以创建如下函数：

DONE

Answer 2

您不会更新状态，因此grep的值始终设置为其初始值：

this.state.number

如何动态生成组件？

2 个答案: