フラグメントへの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(ここではleftright)は、子のセット全体のためのキーとして使用され、 そのオブジェクトの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割り当てを可能にします。

 Back to top

© 2013-2017 Facebook Inc.
Documentation licensed under CC BY 4.0.

このページは、ページトップのリンク先のReact内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • ドキュメントの情報が古い可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。