Блог

Я новичок в веб-разработке, и я только сейчас создаю свою первую страницу (используя 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’.

Вы должны поместить элемент 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>