javascript - 将 JSX 片段与 HTML 连接起来，然后渲染累积的结果

Question

我正在尝试重写 Board 以使用两个循环来制作正方形而不是对它们进行硬编码。我试图连接这些 jsx 片段，我不能像如果它们是字符串那样附加它们。任何见解或帮助将不胜感激。先感谢您这第一段代码是我尝试过的，它给了我一个 Object is an invalid React child 错误。

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

More about lists in React.

---

it gives me a Object is an invalid React child error.

在

 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 元素，所以这行得通)，但这不会产生您想要的元素结构。