Question

我正在尝试使用二维数组填充创建一个JSX对象数组来表示游戏板：

const rows = [];
for (var i=0; i<8; i++) {
  rows.push(<div className="board-row">);
  for (var y=0; y<8; y++) {
    rows.push(this.renderSquare(y, i));
  }
  rows.push(</div>);
}

但是，我一直收到错误：

第{p> Syntax error: Unexpected token行：for (var y=0; y<8; y++) {指向8。

有人能帮我理解我做错了吗？

Answer 1

div并未关闭导致错误的原因，每个元素都应该正确关闭。

要解决您的问题，请使用两个数组，一个用于行，一个用于列，首先计算列，然后将其放在行元素中。

像这样写：

var rows = [], column;
for (let i=0; i<8; i++) {
    column = [];
    for (let y=0; y<8; y++) {
        column.push(this.renderSquare(y, i));
    }
    rows.push(<div className="board-row">{column}</div>);
}

注意：对let和var变量使用i代替j。

查看此答案以获取更多详细信息：What's the difference between using "let" and "var" to declare a variable?

更新：

根据@Jordan Running的建议，我们应该使用const表示行（它永远不会重新分配）和let表示列，如下所示：

const rows = [];
for (let i=0; i<8; i++) {
    let column = [];
    for (let y=0; y<8; y++) {
        column.push(this.renderSquare(y, i));
    }
    rows.push(<div className="board-row">{column}</div>);
}

Answer 2

在rows.push(<div className="board-row">);中，编译器期望div的主体后跟关闭标记。 JSX不会接受不匹配的标签。

你一定是这个意思：

const rows = [];
for (var i=0; i<8; i++) {
  let inner = []
  for (var y=0; y<8; y++) {
      inner.push(this.renderSquare(y, i));
    }
  rows.push(<div className="board-row">{inner}</div>);
}

在行div中，有一个正方形数组。

语法错误：嵌套for循环的意外标记

2 个答案: