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）。但是，我不明白为什么会这样。它在第一次迭代期间只会严格等于0。它使得isSelected等于＆＃34; true＆＃34;对于第一次迭代和＆＃34; false＆＃34;对于所有迭代，所以它并不总是选择第一块板。

董事会的索引将等于ii，每当调用渲染时，它将更新为1。

我的思维过程出了什么问题？

Answer 1

也许你在思考这个问题比你应该做的更多，你可以看到这个循环以同步的方式发生，因此电路板的第一个方块将被添加到阵列中，并添加了电路板和选择的类。其他的不会，因为声明不会仅在第一种情况下评估为真。

REACT：有教程代码的问题

1 个答案: