javascript - 将 元素添加到 JSX 中的数组？

Question

我正在学习实现井字游戏的 React 教程。该板是使用 <div> 的硬编码列表呈现的。 s，像这样:

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

我正在尝试将其转换为使用两个 for 循环而不是对方 block 进行硬编码。这就是我所拥有的。 this.state.rows和 this.state.columns都是3，设置在constructor() .

  render() {    
    var rows = [];
    for (var i = 0; i < this.state.rows; i++) {
      rows.push(<div className="board-row">);
      for (var j = 0; j < this.state.columns; j++) {
        rows.push(this._renderSquare(i + j))
      }
      rows.push(</div>)           
    }
    return (
      <div>
        {rows}
      </div>     
    )
  }

Codepen 提示 unexpected token在此代码的内部 for 循环中。但是，如果我注释掉 push 的行board-row分成rows ，它工作正常(但随后呈现为一行 9 个框)。

我做错了什么？不能<div>元素存储在数组中？看着一些React JSX documentation ，我看到他们有一个 <div>存储在 var 中，所以我不确定我在做什么不同。

Complete codepen在这里:http://codepen.io/rbd/pen/jrqjeV?editors=0010

Answer 1

rows.push(<div className="board-row">);不是合法的 JSX。请记住 JSX 实际转换为:

考虑 var Foo = <div className="board-row" /> . (自闭)

这将变成:

var Foo = React.createElement("div", { className: "board-row" })

如果您的 jsx 中有 child :

var Foo =
  <div className="board-row">
    <span />
  <div>

会变成这样:(第三个参数是children)

var Foo = React.createElement("div", { className: "board-row" },
  React.createElement("span")
)

所以真的没有调用createElement这样的事情只有开始或结束标签。

话虽如此，您可以重写循环，使内部循环添加子节点。还有 _renderSquare函数期望数字从 0 增加到 8。您有 i + j ，但这不是正确的方程式，因为那样你会得到 0, 1, 2, 1, 2, 3, 2, 3, 4 .

var rows = [];
var cells = [];
var cellNumber = 0; <-- keep track of increasing value
for (var i = 0; i < this.state.rows; i++) {
  for (var j = 0; j < this.state.columns; j++) {
    cells.push(this._renderSquare(cellNumber))
    cellNumber++
  }
  rows.push(<div className="board-row">{ cells }</div>)
  cells = [];
}

它会提示添加一个缺失的 key prop，所以在循环中创建元素时一定要这样做。您需要在 div 中执行此操作在你的 _renderSquare Square 上的函数.使用 index因为在这种情况下 key 应该没问题。

codepen