如何基于单击或表单提交多次呈现<Componet/>或Jsx

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { numTimes: 1 };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.setState((prevState) => ({ numTimes: prevState.numTimes + 1 }));
  };

  render() {
    const { numTimes } = this.state;
    const components = Array.from(Array(numTimes).keys()).map((index) => (
      <Component key={index} />
    ));

    return (
      <form onSubmit={this.handleSubmit}>
        {components}
        <button type="submit">提交</button>
      </form>
    );
  }
}

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { renderComponent: false };
  }

  handleClick = () => {
    this.setState((prevState) => ({ renderComponent: !prevState.renderComponent }));
  };

  render() {
    const { renderComponent } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>点击呈现/隐藏组件</button>
        {renderComponent && <Component />}
      </div>
    );
  }
}