Reactガイドを読んでいくその42

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

フラグメント

コンポーネントが複数要素を返すといったケースがReactでは多いらしい。
fragmentを使うとDOMに余分なノードを追加することなく子要素をまとめることができるようになる。

同期

コンポーネントが子要素のリストを返すみたいな例はたくさんある。

// 例
class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

HTMLが正しい挙動をする場合Columns/>は複数のtdを返す必要がある。Columns/`のrender()で親のdiv要素を使うとHTMLは不正なものになってしまう。
fragmentはこのような問題を解決するために用意された。

使い方

class Columns extends React.Component {
  render() {
    return (
      // divだった箇所をReact.Fragmentに
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

出力結果の違い

fragmentを使わない場合

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

fragmentを使う場合

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

短い記法

フラグメントを宣言するための新しい短縮記法

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

空タグにみえて誤解を生みそうだし、keyや属性サポートもないのであまり使わないのがよさそう。

key 付きフラグメント

明示的に <React.Fragment> と宣言したフラグメントでは key を持つことができる。
コレクションをフラグメントの配列に変換したい場合などに便利。

key はフラグメントに渡すことができる唯一の属性です。将来的には、イベントハンドラのような他の属性を渡すこともサポートするかもしれません。
みたいだけどどうなんだろう。

今日はここまで。