本記事について
本記事はReact.Fragmentに関して書いた記事です。筆者の備忘録的な位置付けも兼ねており、間違い等あるかもしれませんが、何かありましたら、お手数ですがコメント等でご連絡いただけますと幸いです。
Fragmentとは
シンタックスシュガーのこと。通常、Reactコンポーネントはルートの要素が一つでないといけない。returnでは一つの要素しか返せないが、Fragementを使用することでその制約を外すことができる。
わかったようなわからないような,,,
公式の例
例えば、以下のようなコードがあるとする。
Tableクラスでは、Columnsコンポーネントを呼び出している。
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />👈ここで呼び出してる
</tr>
</table>
);
}
}
こちらは先ほど呼び出されたColumnsコンポーネント。
returnの中には、div要素で囲われた一つの要素がreturnされている。div要素の中にtd要素が入っているイメージ。
上に書いたように、reactコンポーネントでは一つの要素をreturnするため、
class Columns extends React.Component {
render() {
return (
<div>👈これがないと、二つの要素をreturnしようとしてしまうので、あえて`div要素`で囲うことで要素を一つにまとめている。
<td>Hello</td>
<td>World</td>
</div>
);
}
}
最終的なイメージとしては以下のコードが返ってきている。
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
ここで、< div > div >タグで囲わずにReact.Fragmentを使用するとColumnsコンポーネントは以下のような記述となる。
class Columns extends React.Component {
render() {
return (
<>👈React.Fragmentの代用。（<React.Fragment>でもよい。)
<td>Hello</td>
<td>World</td>
</>
);
}
}
すると最終的に以下のコードが返ってくるイメージ。
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
余計な
< React.Fragment >と< div>< /div>で要素を囲った時の違い
前者ではkeyを持つことができる。現時点では、フラグメントに渡せる唯一の属性のよう。
将来的にはもっと増えるかも...?
key はフラグメントに渡すことができる唯一の属性です。将来的には、イベントハンドラのような他の属性を渡すこともサポートするかもしれません。
とのこと。
結局、デザインのこととか考えるとfragmentを使用した方がいいのか？？？書くのも楽そうだし...
< React.Fragment >と< div>< /div>で要素を囲った時の違い2
・単純に< React.fragment >を使用する方が時間がかかるようです。
スタイルを当てないからdivタグ使わずにReactFragment使っちゃえ〜、という考え方は安直なのかもしれない...
結論
結局、時間がかかってもスタイル崩れや余計な要素までreturnしてしまうことを考えればReactFragmentを利用するのが無難なのかもしれないが、どういった仕組みなのかは理解しておいた方がいいだろう、というふわっとした結論に行き着いてしまった。。。
参考
公式ドキュメント
https://ja.reactjs.org/docs/fragments.html#short-syntax
こちら、fragmentと
ありがとうございます。。。