Вызов компонента React с событием onClick

Question

Мне нужно вызвать Компонент (ExampleComp), и когда кнопка нажата, снова вызвать компонент (ExampleComp). Идея состоит в том, чтобы вызывать Компонент (ExampleComp) столько раз, сколько вы нажимаете кнопку.

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

На самом деле я не знаю, как это сделать точно, и я буду признателен за вашу помощь.

Answer 1

Вы можете использовать государство для этой цели. Допустим, ваше состояние выглядит примерно так:

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

И, наконец, вы можете поместить sh элемент в штат, а React позаботится обо всем остальном.

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

Это сделает работу. Я просто использовал «exampleProp» в качестве примера, но вам не нужно его использовать. На самом деле, государство тоже может быть просто числом. Важной частью является использование состояния при каждом изменении пользовательского интерфейса .

Answer 2

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

Это помогло бы, но я не рекомендую, так как setState повторно выполнит рендеринг (загрузку) компонента снова при клике.