Question

我想通过模板作为道具或儿童，每次单击“添加”时，我想再添加一个项目。

这是我到目前为止的去处：

App.js

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

List.js

...
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>
    );
  }

但是总共添加了一个新项目，它没有子项，因此存在“项目”，但没有“跨度”。因此，列表始终为空。

有人知道该怎么做吗？

重点是列表必须不知道传递给它的内容。无论您通过什么，它都应该添加。

Answer 1

“列表”组件仅呈现子级。我基本上做下面的事情

 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>

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

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

plt.table(cellText=legend[[Hd[0],Hd[i]]].values,colWidths=[0.05,0.1],loc='upper right',colLabels=['Cluster','Centroid'])

很抱歉，如果我在移动设备上键入答案时遇到语法或拼写错误

Answer 2

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;

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

2 个答案: