Question

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

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

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

在div中动态插入React组件

1 个答案: