React.js
Pocket

Reactv16からの目玉機能であるFragmentsの書き方メモ書き

以前はrenderではコンポーネント内にコンポーネントを含めることはできるけど、ルート要素は1つしか返せない、つまり以下のようはできませんでした。divとかなんかでくくる必要があります。

render() {
  return (
    <ChildA />
    <ChildB />
    <ChildC />
  );
}

そうすると無駄にタグで加工必要がある場合がでてきて、ちょっと面倒な時がありました。

Reactv16からはFragmentsを使うことで上記のような書き方ができます。

以下のように書けばOKです。Fragmentのところは実際のコードでは無視されています。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

地味に便利!

詳しくはこちら

React v16.2.0: Improved Support for Fragments

Pocket

Category : Tag :