Reactを基本からまとめてみた【29】【Fragment】

import React from "react";

const SampleComponent : React.FC = () : JSX.Element =>{
    return (
        <div>Mars</div>
        <div>quai</div>
    )
}

//[Error] JSX expressions must have one parent element.

Reactではコンポーネントとして複数の要素を返したい場合、以下のようにそのまま書くことができない。このエラーを回避するために、複数の要素を入れる場合には必ず一つのタグの中に入れる必要がある。

divタグで囲む方法もあるが、Reactにはこのような場合のためにFragmentというタグが用意されている。

Fragmentタグは、機能を持たないタグで、以下のように複数タグをJSXで返したい場合に使用する。

import React from "react";

const SampleComponent = ()  =>{
    return (
        <React.Fragment>
            <div>Mars</div>
             <div>quai</div>
        </React.Fragment>
    )
}

コンポーネントの返し値として以外にも、map()関数で複数要素を返したい場合にもよく使います。

const SampleComponent = ()  =>{
    return (
        <React.Fragment>
            {sampleArray.map((i, key) => {
                return (
                    <React.Fragment key={key}>
                        <div>Hello!!</div>
                        <div>{i}</div>
                    </React.Fragment>
                )
            })}
        </React.Fragment>
    )
}

map()関数で返している要素の中でFragmentにkeyをpropsとして渡す。
keyはFragmentが受け取れる唯一のpropsです。

const SampleComponent = ()  =>{
    return (
        <>
            {sampleArray.map((i, key) => {
                return (
                    <React.Fragment key={key}>
                        <div>Hello!!</div>
                        <div>{i}</div>
                    </React.Fragment>
                )
            })}
        </>
    )
}

Fragmentは空のタグ<>>として書くことができる。

※ keyを渡す場合には空のタグは使えないことに注意。

メリット：セレクターの指定

FragmentはHTMLにレンダリングされる際には存在しない仮のメソッドで、
FlexboxやGridなどのCSSスタイルを利用する際に、構造を壊さず利用できる。

参考サイト

【React】Fragmentの利用方法・メリットについて詳しく解説