如何使JavaScript（带有React framework）按钮创建类的新实例？

我是web开发新手，现在才创建我的第一个页面（在上面使用ReactJS），如果这是一个noob问题，那么很抱歉。在我的页面中，我创建了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=“{this.renderWindow（'test-thingy'）}”；

---

或者甚至反转“and”。我一直在寻找一种方法，但我找不到它。我希望它创建第四个名为“test thingy”的窗口。

您应该将要渲染的JSX元素作为

render

方法的一部分，以更改状态

constwindowcomp=（{name}）=>{name}
；
类板扩展React.Component{
状态={
窗口名：[“联系人”、“帐户”、“信息”]
};
handleClick（）{
这是我的国家({
windowNames:[…this.state.windowNames，“测试内容”]
});
}
render（）{
返回(
{this.state.windowNames.map(
（姓名，i）=>
)}
this.handleClick（）}
>
{"+"}
);
}
}
ReactDOM.render（，document.querySelector（'.react'）；

我没有获得此行的功能

（名称，I）=>

更具体地说，是您声明键的原因。截至目前，它是空的。有没有办法从WindowName填充它？除此之外，它工作得很好，而且我不需要声明WindowComp常量，因为我使用的是我以前创建的Window。

.map

回调的第一个参数是正在迭代的项。例如，在第一次迭代中，

name

是

windowNames[0]

。第二个参数是正在迭代的索引，从0开始（第二次迭代时为1，以此类推）。键是必需的，因为如果忽略它，React将显示警告-有关详细信息，请参阅。

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

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