Javascript 使用onClick事件调用React组件

我需要调用一个组件（ExampleComp），当单击按钮时，再次调用该组件（ExampleComp）。这个想法是在按下按钮的同时调用组件（ExampleComp）

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

函数新组件{
}
------
返回(
创建一个新组件
)

事实上，我不知道该怎么做，我非常感谢您的帮助。

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

返回(
创建一个新组件
{
this.state.clicked？{newComponent}：null
}
)
}

---

这将有所帮助，但我不建议这样做，因为单击后，

setState

将再次重新呈现（加载）组件。

您可以为此使用状态。假设你的州是这样的：

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

---

这就行了。我只是用“exampleProp”作为例子，但你不必使用它。实际上，状态也可以是一个数字。重要的一点是在每次用户界面更改中使用状态。

您所说的“调用组件”到底是什么意思？是否将新的

ExampleComp

组件添加到div？

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