REACT：チュートリアルコードによる質問

Question

私は全く新しい反応を示しています。次のチュートリアルコードについて質問があります。

var Board = React.createClass({ 
    render: function() { 
    var className = "board"; 
    if (this.props.selected) { 
     className += " selected"; 
    } 
    return (
     <div className={className}> 
     {this.props.index + 1} 
     </div> 
    ); 
    } 
}); 

var BoardSwitcher = React.createClass({ 
    render: function() { 
    var boards = []; 
    for (var ii = 0; ii < this.props.numBoards; ii++) { 
     var isSelected = ii === 0; 
     boards.push(
     <Board index={ii} selected={isSelected} key={ii} /> 
    ); 
    } 

    return (
     <div> 
     <div className="boards">{boards}</div> 
     <button>Toggle</button> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <BoardSwitcher numBoards={3} />, 
    document.getElementById('container') 
); 

練習によると、最初のボードは常に選択されます（var isSelected = ii === 0）。しかし、私はなぜそれがこのようなのか分かりません。 iiは最初の反復中に厳密に0に等しくなります。 isSelectedは、最初の反復では「true」に、すべての反復では「false」になります。したがって、常に最初のボードを選択するとは限りません。

ボードのインデックスはiiに等しく、レンダリングが呼び出されるたびに1で更新されます。

私の思考プロセスには何が問題なのですか？

Answer 1

多分あなたはこれ以上のことを考えていないかもしれませんし、このループが同期的なやり方で起こることが分かります。したがって、ボードの最初の四角はボードとセレクションクラスが追加されたアレイに追加されます。ステートメントは最初のケースでのみ真と評価されるため、他のステートメントは実行されません。