Question

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

我当前（工作）的代码：

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

Answer 2

假设，ReactJS v16.0.0 +，您可以执行以下操作：

renderSquareWithWrapper(index){
    const inclWrapper = (index != 0 && index%3 ==0);

    return (
      <React.Fragment>
        { inclWrapper 
            ? <div key={index} className="board-row">{ this.renderSquare(index) }</div>
            : this.renderSquare(index)
         }
      </React.Fragment>,
    );
}

render() {    
    return (
      <div>
        <div className="status">{ status }</div>
        { Array.isArray(this.state.squares) 
            && this.state.squares.map( (_, idx) => this.renderSquareWithWrapper(idx) ) }
      </div>
    );
}

不要忘记确保向renderSquare元素添加“关键”道具，否则您将收到React警告（它是如何识别 - 内部 - 每个组件）。上面的示例利用了ReactJS 16 +中引入的Content Fragments

React - 循环遍历JSX中render（）函数中的值

2 个答案: