如何使 JavaScript（使用 React 框架）按钮创建一个类的新实例？

Question

我是 web 开发的新手，我现在才制作我的第一页（在它上面使用 ReactJS），如果这是一个菜鸟问题，很抱歉。在我的页面中，我创建了 3 个窗口，稍后将填充信息，我希望用户能够通过单击“+”按钮来制作自己的窗口。虽然，由于某种原因，我的代码不起作用。即使单击“+”按钮，也没有任何反应。这是用于演示的“Board”类的代码。

class Board extends React.Component {
  renderWindow(i) {
    return (
      <Window name={i} />
    );
  }

  handleClick() {
    var test = document.createElement("P");
    test.innerHTML = "this.renderWindow('test-thingy')";
    document.body.appendChild(test);
  }

  render() {
    return (
      <div>
        <div className="info-window">
          {this.renderWindow("Contacts")}
          {this.renderWindow("Accounts")}
          {this.renderWindow("Info")}
        </div>
      <button
        className="button1"
        onClick={() => this.handleClick()}
      >
        {"+"}
      </button>
      </div>
    );
  }
}

我只是不知道如何让它做出相应的响应，因为现在它只创建一个带有来自 test.innerHTML 的引用的文本。我已经为该行尝试了其他几种语法，例如：

    test.innerHTML = "{this.renderWindow('test-thingy')}";

或

    test.innerHTML = "<div> {this.renderWindow('test-thingy')} </div>";

甚至颠倒“和”。从那以后我一直在寻找一种方法，但我找不到它。我希望它创建一个名为“test-thingy”的第四个窗口。

Answer 1

您应该将 JSX 元素由于更改状态而被渲染作为render 方法的一部分。

const WindowComp = ({ name }) => <p>{name}</p>;
class Board extends React.Component {
  state = {
    windowNames: ['Contacts', 'Accounts', 'Info']
  };
  handleClick() {
    this.setState({
      windowNames: [...this.state.windowNames, 'test-thingy']
    });
  }

  render() {
    return (
      <div>
        <div className="info-window">
          {this.state.windowNames.map(
            (name, i) => <WindowComp key={i} name={name} />
          )}
        </div>
      <button
        className="button1"
        onClick={() => this.handleClick()}
      >
        {"+"}
      </button>
      </div>
    );
  }
}
ReactDOM.render(<Board />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>