Javascript 以编程方式在React中添加更多组件

我想将模板作为道具或子项传递，每次单击“添加”我都想再添加一个项目

这就是我到目前为止所得到的：

App.js

<List template={
  (<Item>
      <span>Test</span>
   </Item>)
} />

...
add = () => {
    const list = this.state.list;
    const i = list.length + 1;
    const newItem = cloneElement(this.props.template, { key: i });
    this.setState({ list: this.state.list.concat([newItem]) });
}

...

render() {
    return (
      <div className="list">
        {this.state.list}
        <button onClick={this.add}>Add</button>
      </div>
    );
  }

List.js

<List template={
  (<Item>
      <span>Test</span>
   </Item>)
} />

...
add = () => {
    const list = this.state.list;
    const i = list.length + 1;
    const newItem = cloneElement(this.props.template, { key: i });
    this.setState({ list: this.state.list.concat([newItem]) });
}

...

render() {
    return (
      <div className="list">
        {this.state.list}
        <button onClick={this.add}>Add</button>
      </div>
    );
  }

。。。
添加=（）=>{
const list=this.state.list；
常数i=list.length+1；
const newItem=cloneElement（this.props.template，{key:i}）；
this.setState（{list:this.state.list.concat（[newItem]）}）；
}
...
render（）{
返回(
{this.state.list}
添加
);
}

但是，尽管添加了一个新项目，但它没有子项，因此“项目”在那里，但“跨度”不在那里。所以列表总是空的

有人知道怎么做那样的事吗

---

关键是列表不能知道传递给它的是什么。无论您传递什么，它都应该添加。

您的列表组件只呈现子级。我基本上是这样做的

 class List extends Component{
     render(){
         return(
             <div>
                 {this.props.children}
             </div>
         )
    }
}

 this.state ={
      items: []
 }
 add = () => {
      const item =  <Item>
           <span>Test</span>
         </Item>
      this.setState(prevState => ({
           items: [...prevState.items, item]
      }));
  }
 <div>
      <List>
          {items}
      </List>
      <button onClick={this.add} />
   </div>

类列表扩展组件{
render（）{
返回(
{this.props.children}
)
}
}

您可以调用列表并传递项目或下面类似的内容

 class List extends Component{
     render(){
         return(
             <div>
                 {this.props.children}
             </div>
         )
    }
}

 this.state ={
      items: []
 }
 add = () => {
      const item =  <Item>
           <span>Test</span>
         </Item>
      this.setState(prevState => ({
           items: [...prevState.items, item]
      }));
  }
 <div>
      <List>
          {items}
      </List>
      <button onClick={this.add} />
   </div>

您的按钮位于调用列表的组件中，您将onClick={this.add}传递给按钮。像下面这样

 class List extends Component{
     render(){
         return(
             <div>
                 {this.props.children}
             </div>
         )
    }
}

 this.state ={
      items: []
 }
 add = () => {
      const item =  <Item>
           <span>Test</span>
         </Item>
      this.setState(prevState => ({
           items: [...prevState.items, item]
      }));
  }
 <div>
      <List>
          {items}
      </List>
      <button onClick={this.add} />
   </div>

this.state={
项目：[]
}
添加=（）=>{
常数项=
试验
this.setState（prevState=>({
items:[…prevState.items，item]
}));
}
{items}

抱歉，如果语法或拼写错误，我正在手机中键入答案

import React，{Component}来自'React'；
import React, { Component } from 'react';

class Item extends Component {

  render(){
    return (<p>This is an item
      {this.props.children}
    </p>)
  }

}

class List extends Component {

  constructor(props){
    super(props);
    this.state = {list: []};
  }

  add = () => {
    const list = this.state.list;
    const i = list.length + 1;
    const newItem = React.cloneElement(this.props.template, { key: i });
    this.setState({ list: this.state.list.concat([newItem]) });
    console.log(this.props.template);
  }

  render() {
    return (
      <div className="list">
        {this.state.list}
        <button onClick={this.add}>Add</button>
      </div>
    );
  }

}

class App extends Component {
  render() {
    return (
      <List template={
        (<Item>
            <span>This is a Template</span>
         </Item>)
      } />
    );
  }
}

export default App;

类项扩展组件{
render（）{
返回（这是一个项目
{this.props.children}
）
}
}
类列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={list:[]}；
}
添加=（）=>{
const list=this.state.list；
常数i=list.length+1；
const newItem=React.cloneElement（this.props.template，{key:i}）；
this.setState（{list:this.state.list.concat（[newItem]）}）；
console.log（this.props.template）；
}
render（）{
返回(
{this.state.list}
添加
);
}
}
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

不确定是否是同一个问题。在这种情况下，SampleComponent在应用程序组件中定义。我想让应用程序组件现在了解SampleComponent。它必须作为道具接收，但按“添加”后，它应添加一个新的“项目”。此逻辑必须在列表组件中更新我的答案，请检查。每当单击“添加”按钮时，这将添加新项目。我刚试过，发生的情况是，列表变为空，因为该子项（在本例中）的子项不存在。@VictorFerreira这是因为该组件。您必须确保该组件呈现作为道具childrend传递的子项<代码>常量项=props=>（{props.children}）@Hemadri Dasari为您的问题提供了一个优雅的解决方案。他以正确的方式根据状态更新状态。如果您想在组件中使用添加逻辑，可以通过道具传递逻辑。我认为改进代码的最佳方法是在此处或代码审阅时显示所有内容。干杯！它和我做的有什么不同？不确定-没有看到你的项目组件-你让它渲染this.props.children吗？