使用 onClick 事件调用 React 组件

Question

I need to call a Component (ExampleComp), and when the button is clicked, call againthe component (ExampleComp). The idea is to call the Component(ExampleComp) as many times as you press the button.

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

Actually i don't know how to do it exactly and i would apreciate your help.

Answer 1

You can use the state for this purpose. Let's say your state is something like this:

this.state = { items: [] };

You can render all the items like the following example:

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

And finally, you can push an item into the state, and React will take care of the rest.

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

This will do the job. I just used "exampleProp" to be an example but you don't have to use it. Actually, the state can be just a number too. The important part is using state in every user interface change .

Answer 2

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

This would help but though not recommended by me as setState will re-render(load) the component again onClick.