返回首页 React 中文版

快速入门 - QUICK START

指南 - GUIDES

参考 - REFERENCE

温馨提示 - TIPS

键控的片段

在大多数情况下,您可以使用 key 道具来指定你从 render 返回的元素的键。然而,这种做法在一种情况下是不成立的:如果你有两组需要重新排序的孩子,那么在不增加包装器元素的情况下没有办法给每组放置一个键。

也就是说,如果你有一个组件,例如:

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

当你改变 swapped 道具时,子组件会卸载并重新安装,因为没有任何键标记了这两组子组件。

为了解决这个问题,你可以使用 React.addons.createFragment 给两组孩子设置键。

ReactFragment React.addons.createFragment(object children)

不是创建数组,我们写:

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

传递的对象的键(即,leftright)用来当作整个子组件组的键,并且对象的键的顺序是用于确定子组件呈现的顺序的。有了这个变化,两组孩子将在不被卸载的情况下,在 DOM 中正确地重新排序。

createFragment 的返回值应该被视为一个不透明的对象;你可以使用 React.Children 助手来在片段中循环,但不应该直接访问它。还要注意我们依靠 JavaScript 引擎保存对象枚举顺序,这不是由规范保证的,而是通过所有的主浏览器和非数字键对象的 VMs 实现的。

注意:

将来 createFragment 有可能被如下所示的 API 取代:

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

允许你直接在 JSX 中分配键,不用添加包装器元素。