[React] `<></>`とは何のことか

概要

<></>ってなんだっけ…となった。

class Hoge extends React.Component {
  render() {
    return (
      <>
        <span>Hello</span>
      </>
    );
  }
}

親要素が不要なケースで使用するFragmentとしての認識はあったが、これをどういう使い分けをするのか知らなかった。（ググラビリティが悪すぎて検索できない）

答え

フラグメントの省略記法のことらしい。

class Hoge extends React.Component {
  render() {
    return (
      <React.Fragment>
        <span>Hello</span>
      </React.Fragment>
    );
  }
}

<></> は他の要素と同じように使うことができるが、keyや属性が使えない。逆に言えば、keyを渡す場合は<React.Fragment>を使ってkeyや属性を渡す必要がある。

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>
  );
}