javascript - 在 div 中动态插入 React 组件

Question

我想在 div HTML 中动态插入几个 React 组件元素。每次单击按钮时，我都想在带有 id="container" 的 div 中添加一个新的 PeriodButtonContainer。

这是我到目前为止尝试过的:

class Period extends React.Component {
  addPeriodHandler = () => {
    /****?????******/
  };

  render() {
    return (
      <div>
        <div id="container">
          <PeriodButtonContainer />
        </div>
        <div>
          <button id="addPeriod" onClick={this.addPeriodHandler}>
            Add a period
          </button>
        </div>
      </div>
    );
  }
}

提前致谢

Answer 1

您可以保留一个计数器，在每次单击按钮时递增，并在您的渲染方法中创建那么多 PeriodButtonContainer 组件，例如Array.from .

示例

class Period extends React.Component {
  state = { periods: 1 };

  addPeriodHandler = () => {
    this.setState(previousState => {
      return { periods: previousState.periods + 1 };
    });
  };

  render() {
    return (
      <div>
        <div id="container">
          {Array.from({ length: this.state.periods }, (_, index) => (
            <PeriodButtonContainer key={index} />
          ))}
        </div>
        <div>
          <button id="addPeriod" onClick={this.addPeriodHandler}>
            Add a period
          </button>
        </div>
      </div>
    );
  }
}