Конкатенация фрагментов JSX с HTML, а затем рендеринг накопленного результата.

Question

Я пытаюсь переписать Board, используя два цикла, чтобы сделать квадраты вместо их жесткого кодирования.Я пытался объединить эти фрагменты jsx, я не могу просто добавить их, как если бы они были строками.Любое понимание или помощь будет принята с благодарностью.Заранее спасибо Этот первый фрагмент кода - это то, что я пробовал, и он дает мне объект - недопустимая дочерняя ошибка React.

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i) } />;
  }

  render() {
    let board = null;
    for(var i = 0; i < 9; i+=3)
    {
        let row = <div className="board-row">{this.renderSquare(i)}{this.renderSquare(i+1)}{this.renderSquare(i+2)}}</div>
        board = <div>{{board}}{{row}}</div>; 
    }

    return (
        <div>
            {board}
        </div>
    );
  }
}

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Answer 1

JSX преобразуется в React.createElement(...) вызовы функций. Они возвращают объекты, а не строки, поэтому вы не можете объединить их.

Просто создайте массив элементов:

  render() {
    const rows = [];
    for(var i = 0; i < 9; i+=3)
    {
        rows.push(
          <div key={i} className="board-row">
            {this.renderSquare(i)}
            {this.renderSquare(i+1)}
            {this.renderSquare(i+2)}}
          </div>
        );
    }

    return (
        <div>
            {rows}
        </div>
    );
  }

Подробнее о списках в Реакте.

---

это дает мне объект является недопустимой дочерней ошибкой React.

В

 board = <div>{{board}}{{row}}</div>; 

{board} является кратким обозначением литерала объекта для {board: board}. То же самое для {row}. Так что это действительно

board = <div>{{board: board}}{{row: row}}</div>; 

Как говорит React, он не знает, как отображать произвольные объекты.

Может быть Вы хотели

board = <div>{board}{row}</div>;

вместо этого (board и row - это, в конце концов, элементы React, так что это работает), но это не даст желаемой структуры элемента.