MENU

React.Fragment

JavaScript React
React
目次

目的

前回に引き続きReactについて学習を進めた。今回は、React.Fragmentについてまとめる。

React.Fragmentとは

jsxを使用する際には returnの中身をdivタグで囲む必要がある。

ただ、無駄にdivタグを書いてしまうし、ブロック要素を入れたくない時にはかえって邪魔になる。

そこで、Raact.Fragmentを使用することで、html上ではdivタグにならずにjsxもエラーにならない。

import React from "react" //Reactのパッケージのデフォルトエクスポート
const Example = () =>{
    return (
        <React.Fragment> //これはHTMLのタグとして読み込まれない
            <div>
                <h3> Hello Component </h3>
            </div>
            <p> hogehogehogehoge</p>
        </React.Fragment>　//これはHTMLのタグとして読み込まれない
    )
}

ちなみにReactパッケージを名前付きのインポートにすると

import {Fragment} from "react" //Reactのパッケージのデフォルトエクスポート
const Example = () =>{
    return (
        <Fragment> //これはHTMLのタグとして読み込まれない
            <div>
                <h3> Hello Component </h3>
            </div>
            <p> hogehogehogehoge</p>
        </Fragment>　//これはHTMLのタグとして読み込まれない
    )
}

さらにFragmentは省略できる。

import {Fragment} from "react" //Reactのパッケージのデフォルトエクスポート
const Example = () =>{
    return (
        <> //Fragmentの省略
            <div>
                <h3> Hello Component </h3>
            </div>
            <p> hogehogehogehoge</p>
        </>　//Fragmentの省略
    )
}

補足

Fragmentに関しては、HTMLタグとして読み込むことができないため、基本的には属性をつけることはできない。

ただし「key」という属性はつけることができる。このkeyはループ処理で使用する。

import {Fragment} from "react" 
const Example = () =>{
    return (
        <Fragment key = ''> 
            <div>
                <h3> Hello Component </h3>
            </div>
            <p> hogehogehogehoge</p>
        </Fragment>　
    )
}

今回はここまで。

JavaScript React
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次