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

Question

I am new to web development and I only now make my first page (using ReactJS on top of it), so sorry if this is a noob question. In my page I have created 3 windows which are going to be filled with information later on, and I want the user to be able to make their own ones by clicking a "+" button. Though, for some reason, my code does not work. Even after one clicks at the "+" button, nothing happens. Here's the code of my 'Board' class for demonstration.

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

I just don't know how to make it respond accordingly, because right now it only creates a text with the quote from test.innerHTML. I have tried several other syntaxes for that line, such as:

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

or

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

or even inverting the " and '. I have been searching ever since for a way, but I am unable to find it. I want it to create a fourth window with the name 'test-thingy'.

Answer 1

You should put the JSX element to be rendered due to change state as part of the render method .

 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>