Question

我正在执行一个实施tic-tac-toe游戏的反应教程。电路板使用硬编码的<div>列表进行渲染，如下所示：

  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循环而不是硬编码方块。这就是我所拥有的。 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在这段代码的内部for循环中抱怨unexpected token。但是，如果我将push board-row div的行标注为rows，它可以正常工作（但随后呈现为9行的单行）。

我做错了什么？ Can＆＃t; t <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：

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

它将变为:(第三个参数是儿童）

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道具，因此在循环中创建元素时务必确保这样做。您需要在div以及_renderSquare上的Square函数中执行此操作。在这种情况下，使用index作为密钥应该没问题。

<强> codepen

Answer 2

我可以看到问题的一部分是你在推送方法上缺少引号。

rows.push(<div className="board-row">);

应该是

rows.push('<div className="board-row">');

和

rows.push(</div>)

应该是

rows.push('</div>');

在JSX中将<div>元素添加到数组中？

2 个答案: