フラグメントへのkey割り当て
ほとんどのケースで、keyプロパティを使用することで、renderから返される要素を特定することが出来ます。
ただし、これが適用出来ないケースがあります。
並び替えが必要となる子のセットを2つ持つ場合、ラッパー要素を追加すること無く各セットにkeyを持たせる方法がありません。
そのため、次のようなコンポーネントを持つ場合、
var Swapper = React.createClass({
propTypes: {
// leftChildrenとrightChildren`は文字列、要素、配列等でも構いません。
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>;
}
});
子の2つのセットは何らかのkeyが付けられていないため、
swappedのpropを変更すると、子ではアンマウント及び再マウントが行われます。
この問題を解決するために、React.addons.createFragmentを使用して子のセットにkeyを与えることが出来ます。
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
});
}
オブジェクトに渡されたkey(ここではleftとright)は、子のセット全体のためのキーとして使用され、
そのオブジェクトのkeyの順番は、描画される子の順番を決定するのに使用されます。
この変更によって、子の2つのセットはアンマウントされること無く、DOM内で正しく並び替えが行われるようになります。
createFragmentから返される値は不明瞭なオブジェクトとして扱われるべきであり、
React.Childrenをフラグメント(fragment - 断片)通してループ処理することが出来ますが、
直接アクセスするべきではありません。
また、ここでは保持されるオブジェクトの列挙順が、JavaScriptエンジンに依存する事に注意して下さい。
ただし、仕様で保証されていないものの、全ての主要ブラウザとVMは非数値キーのオブジェクト用に実装されています。
注意:
将来的に、createFragmentは次のようなAPIに置き換えられるかもしれません。
return (
<div>
<x:frag key="right">{this.props.rightChildren}</x:frag>,
<x:frag key="left">{this.props.leftChildren}</x:frag>
</div>
);
JSX内にラッパー要素を追加すること無く、直接key割り当てを可能にします。