1

试图对我做类似事情的答案： https ://stackoverflow.com/a/45785715/8126531

嗨，我在这里做 ReactJS 教程，我基本上处于它要求替换的部分：

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

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

有人能告诉我为什么我有这个错误，或者我在概念上是否有错误，我应该以不同的方式来做吗？

干杯。

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

[已解决]：感谢大家的回复。感谢用户“emma”，我设法让它工作。我认为问题在于您不能将“不完整”的 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;
}

再次感谢各位！！

4

4 回答 4

0

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

于 2017-11-03T15:43:42.783 回答
0

最好的方法是将逻辑拆分为两个函数。一个创建行，另一个将单元格添加到每一行。这是一个示例，您可以如何做到这一点。

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'属性。

于 2017-11-03T16:07:44.297 回答
0

由于 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>
        )
   }
}
于 2017-11-03T16:21:56.290 回答
-1

您可以使用 reactjsdangerouslySetInnerHTML属性

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

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

于 2017-11-03T15:52:32.473 回答