Javascript 如何动态生成组件？

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

我试图通过创建一个大小为所选数字的组件数组来生成这个结果。当我选择一个数字时，它会启动一个handle函数，在创建过程中更改所选的数字

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，。。。它不会呈现新组件。

您可以创建如下函数：

makeComponentList=(num)=>{
    let i=0,arr=[];
    for(;i<num;i++){
        arr.push(<TestComponent key={i} />)
    }
    return arr;
}

handle = selected => {
    this.setState({number:selected.value});
}

render() {
    return(
        <React.Fragment>
            <Select onChange={this.handle} options = { ... }/>
            {this.makeComponentList(this.state.number)}
        </React.Fragment>
    );
}

---

您不更新状态，因此this.state.number值始终设置为其初始化值：

句柄=已选择=>{ this.setState{number:selected.value}；//将重新呈现组件 这是最新情况； }; 渲染{ 回来 {[…Arraythis.state.number].mape，i=> //^添加唯一的密钥 } }

---

您应该始终使用this.setState方法更新状态变量。您的代码可以工作，但由于某种原因，我不知道是否选择1，然后选择2，它不会重新计算第一个状态变量。如果显示的状态变量不止一个，则更改类。它保留第一个类A，然后添加其他类B。如果我直接选择2，两者都将具有类B。你知道这里发生了什么吗？谢谢。如果组件已经安装，React不会再次安装。它只会重新渲染它。所以，当您选择1和2时，第一个组件已经存在。所以它被重新渲染了。但是，直接选择2时，两个组件都将安装。