使用onClick事件调用React组件

Question

我需要调用一个组件（ExampleComp），然后单击按钮时，再次调用该组件（ExampleComp）。这个想法是在您按下按钮时多次调用Component（ExampleComp）。

function newComponent{
   <ExampleComp/>
}
------
return(
<div>
  <ExampleComp/>
  <Button className="btnNew"  onClick= 
  {newComponent}> Create a new Component</Button>
</div>
)

实际上，我不知道该怎么做，我会很感激您的帮助。

Answer 1

render(){
  return (
    <Button className="btnNew"  onClick={ this.setState({ clicked:true }) }>Create a new Component</Button>
    {
       this.state.clicked ? {newComponent} : null
    }
  )
}

这会有所帮助，但我不建议这样做，因为setState将再次在onClick上重新渲染（加载）该组件。

Answer 2

您可以将状态用于此目的。假设您的状态是这样的：

this.state = { items: [] };

您可以像以下示例一样呈现所有项目：

return (
  <div>
    {this.state.items.map(item => {
      return <ExampleComp exampleProp={item.exampleProp} />;
    })}
    <Button className="btnNew" onClick={newComponent}>
      Create a new Component
    </Button>
  </div>
);

最后，您可以将项目推入状态，React会处理其余的事情。

function newComponent{
   newItem = { exampleProp: 'Something?' };
   this.setState((state, props) => ({ items: [...items, newItem] }));
}

这将完成工作。我只是使用“ exampleProp”作为示例，但您不必使用它。实际上，状态也可以只是一个数字。重要的部分是每次用户界面更改时的使用状态。