反應：問題與教程代碼

我是全新的反應，我對以下教程代碼有問題。反應：問題與教程代碼

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等於第一次迭代爲「真」，所有迭代都爲「假」，所以它並不總是選擇第一塊板。

董事會的索引將等於ii，每當調用渲染器時它將被更新1。

我的思維過程出了什麼問題？

來源

2017-09-25 aDev

它始終標記着它創建的第一塊選定板，並且所有後面的板都未選中。該循環正在創建3個電路板並設置要選擇的第一個電路板。所以每次你開始這個時候，它都會標示出第一個被選中的板子，而其他的則不是。 – DillGromble

董事會什麼時候由boards.push創建？ – aDev

電路板索引設置爲等於ii，並且所選的等於來自ii === 0的布爾值，這隻發生在第一塊電路板上。有3個董事會的實例。這3個電路板應該是'[<電路板索引= 0 selected = true />，<電路板索引= 1 selected = false />，<電路板索引= 2 selected = false />] – DillGromble

也許你在這個問題上想的比你應該多，你可以看到這個循環發生在一個同步的方式，因此板的第一個平方將被添加到陣列並添加了seleacted類。其他人不會因爲聲明不會僅在第一種情況下評估爲真。

來源

2017-09-25 20:45:18

反應：問題與教程代碼

回答

相關問題