ReactJS 教程 (tic tac) 创建块 HTML 意外令牌错误

Question

试图对我做类似事情的回答：

嗨，我正在做 ReactJS 教程 here，我基本上在它要求替换的部分：

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

用 2 个循环来制作正方形而不是硬编码。

从概念上讲，我不知道我是否理解错了，但是，我一直在尝试将所有元素推入一个数组，然后将其呈现如下：

render() {
    return (
        <div>{ this.createBoard(3, 3) }</div>
    );
}

createBoard(rows, columns) {
    let htmlBlock = [];
    for (let i = 0; i < columns; i++) {
        htmlBlock.push(<div className="board-row">);
        for (let j = 0; j < rows; j++) {
            htmlBlock.push(this.renderSquare(j));
        }
        htmlBlock.push(</div>);
    }
    return htmlBlock;
}

但我在控制台中收到一条错误消息，说 "rows" 之后的分号是意外标记。如果我将元素作为字符串推送到 htmlBlock，那么输出正是我想要的，除了在控制台中它是文字字符串而不是 HTML.

谁能告诉我为什么会出现这个错误，或者我是否在概念上理解错误，我应该换一种方式来做？

干杯。

顺便说一句，不确定它是否相关，但我正在使用 webpack 并且正在转换和捆绑 jsx 文件。

[已解决]：感谢大家的回复。多亏了用户 "emma"，我才设法让它工作。我认为问题是您无法将 "incomplete" html 块推送到数组并呈现它。以下是我所做的更改：

createBoard(rows, columns) {
    let htmlBlock = [];
    for (let i = 0; i < columns; i++) {
        // htmlBlock.push(<div className="board-row">);
        let test = [];
        for (let j = 0; j < rows; j++) {
            test.push(this.renderSquare(j));
        }
        htmlBlock.push(<div> { test }</div>);
    }
    return htmlBlock;
}

再次感谢大家！！

Answer 1

您不能分别推送 <div> 和 </div>。您应该在顶部循环中创建另一个 row 列表，然后在所有内容都添加到该行之后，您可以将 <div>{row}</div> 推送到 htmlBlock.

Answer 2

你可以使用reactjs dangerouslySetInnerHTML 属性

render() {
    return (
        <div dangerouslySetInnerHTML={{ __html: this.createBoard(3, 3) }}></div>
    );
}

现在可以在将 html 字符串推送到 html 块变量时使用字符串。

Answer 3

最好的方法是将逻辑拆分为两个函数。一个创建行，另一个向每一行添加单元格。 Here's an example 你怎么做到的。

class Board extends React.Component {

  createCells(cols) {
    const result = [];

    for (let i = 0; i < cols; i++) {
      result.push(<div key={"col-" + i} className="column">Cell</div>)
    }

    return result;
  }

  createBoard(rows, cols) {
    const result = [];

    for (let i = 0; i < rows; i++) {
      result.push(<div key={"row-" + i} className="row">{this.createCells(cols)}</div>)
    }

    return result;
  }

  render() {
    return (
        <div className="board">
          { this.createBoard(3, 3) }
        </div>
      )
   }
}

顺便说一下，在反应中渲染数组时永远不要忘记 'key' 属性。

Answer 4

由于 JSX 只允许表达式，而 for 循环不是表达式，因此与 JSX 一起使用会有点尴尬。

您可以创建填充为 null 的数组并映射到这些数组上，如下所示：

function emptyArray(n) {
  return new Array(n).fill();
}

class Board extends React.Component {
    createBoard(rows, columns) {
        return emptyArray(rows).map((_, i) => (
            <div key={i} className="board-row">
                {emptyArray(columns).map((_, j) => (
                    <span key={j} className="board-column">
                        - row {i + 1}, column {j + 1} -
                    </span>
                ))}
            </div>
        ));
    }

    render() {
        return (
            <div className="board">
                { this.createBoard(3, 3) }
            </div>
        )
   }
}

ReactJS 教程 (tic tac) 创建块 HTML 意外令牌错误

ReactJS tutorial (tic tac) creating block of HTML unexpected token error

javascript

html

reactjs

jsx

unexpected-token