javascript - React - 在 JSX 中的 render() 函数中循环值

Question

菜鸟问题，但我是 react 新手，我想在渲染方法中循环我的状态值。

我当前(工作)代码:

render() {
    return (
      <div>
        <div className="status">{status}</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>
    );
  }

我会喜欢这样的东西:

render() {    
    return (
      <div>
        <div className="status">{status}</div>
        for (var i = 0; i < this.state.squares; i++) {
          if (i!=0 && i % 3 == 0) { 
            <div className="board-row">
          }

          {this.renderSquare(i)}

          if (i!=0 && i % 3 == 0) { 
            </div>
          }
        }
      </div>
    );
  }

显然这个语法不起作用，但希望你能明白要点。

Answer 1

渲染函数中循环的方式是使用map。

render() {
        return (
            <div>
                <div className="status">{status}</div>
                {
                    this.state.squares.map((square, idx) =>
                        idx % 3 === 0 ?
                            <div className="board-row" key={idx}>
                                {this.renderSquare(idx)}
                                // This makes sure no extra elements are created.
                                {this.state.squares[idx + 1] && this.renderSquare(idx + 1)}
                                {this.state.squares[idx + 2] && this.renderSquare(idx + 2)}
                            </div>
                            :
                            null
                    )}}
                );
                }