ReactのFragmentについて3分でさっと理解

Fragmentはシンタックスシュガーだ。returnで一つの要素しか渡せないという制約を外してくれる。
要するにjsxのネストを浅くするので、デザイン崩れとかの時に使えるとかっこいい。

Fragmnentの説明

よくあるパターンとして

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

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

のようなパターンがある。
このパターンの問題はreturnに複数のtdタグを渡せないので、tdタグをdivで囲っていることだ。

つまり結果として

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

という形に出力される。不必要なdivが入ってしまっている!

そこでfragmentの出番だ。子要素をdivで囲う代わりにfragmentで囲ってやる。

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment> // <React.Fragment>の代わりに<>で代用もできる
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

そうすると

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

のように出力される。不必要なdivが消えました！
それだけ。使いどころがあまりない。style崩れを直す時に、ワンポイントで使うぐらい。

keyを使うこともできる。（mapと一緒に使うときなど。）

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

尚、私の愛するreact nativeでは、

ショートハンドの
<>
は使えず、

<React.Fragment>

のみ使える。