鍵控的片段

在大多數(shù)情況下,您可以使用 key 道具來指定你從 render 返回的元素的鍵。然而，這種做法在一種情況下是不成立的：如果你有兩組需要重新排序的孩子，那么在不增加包裝器元素的情況下沒有辦法給每組放置一個(gè)鍵。

也就是說，如果你有一個(gè)組件，例如：

var Swapper = React.createClass({
  propTypes: {    // `leftChildren` and `rightChildren` can be a string, element, array, etc.
    leftChildren: React.PropTypes.node,
    rightChildren: React.PropTypes.node,
    swapped: React.PropTypes.bool
  }
  render: function() {    var children;    if (this.props.swapped) {
      children = [this.props.rightChildren, this.props.leftChildren];
    } else {
      children = [this.props.leftChildren, this.props.rightChildren];
    }    return <div>{children}</div>;
  }
});

當(dāng)你改變 swapped 道具時(shí)，子組件會(huì)卸載并重新安裝，因?yàn)闆]有任何鍵標(biāo)記了這兩組子組件。

為了解決這個(gè)問題，你可以使用 React.addons.createFragment 給兩組孩子設(shè)置鍵。

ReactFragment React.addons.createFragment(object children)

不是創(chuàng)建數(shù)組，我們寫：

if (this.props.swapped) {
  children = React.addons.createFragment({
    right: this.props.rightChildren,
    left: this.props.leftChildren
  });
} else {
  children = React.addons.createFragment({
    left: this.props.leftChildren,
    right: this.props.rightChildren
  });
}

傳遞的對(duì)象的鍵(即，left 和 right)用來當(dāng)作整個(gè)子組件組的鍵，并且對(duì)象的鍵的順序是用于確定子組件呈現(xiàn)的順序的。有了這個(gè)變化，兩組孩子將在不被卸載的情況下，在 DOM 中正確地重新排序。

createFragment 的返回值應(yīng)該被視為一個(gè)不透明的對(duì)象；你可以使用 React.Children 助手來在片段中循環(huán)，但不應(yīng)該直接訪問它。還要注意我們依靠 JavaScript 引擎保存對(duì)象枚舉順序，這不是由規(guī)范保證的，而是通過所有的主瀏覽器和非數(shù)字鍵對(duì)象的 VMs 實(shí)現(xiàn)的。

注意：

將來 createFragment 有可能被如下所示的 API 取代：

return (<div><x:frag key="right">{this.props.rightChildren}</x:frag>,<x:frag key="left">{this.props.leftChildren}</x:frag></div>);

允許你直接在 JSX 中分配鍵，不用添加包裝器元素。