flabaka.com

GatsbyJSでReactのFragmentを使うには？

GatsbyJSTips

flabaka

フラグメントの記法

GatsbyJSで固定ページを作成しようとして、こんな感じにコードを書いてしまうと…

import React from "react"
（略）
return (
        <h1>このブログについて</h1>
        <h2>GatsbyJSでSPA（Single Page Application）を始めてみる</h2>
        <p>SPA（Single Page Application）を始めるには色々な選択肢があって、どれを選べばいいんだろう？　と。</p>
        )
（略）

怒られます。

Adjacent JSX elements must
be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

言われた通りにコードを修正すると…

import React from "react"
（略）
return (
        <>
           <h1>このブログについて</h1>
           <h2>GatsbyJSでSPA（Single Page Application）を始めてみる</h2>
           <p>SPA（Single Page Application）を始めるには色々な選択肢があって、どれを選べばいいんだろう？　と。</p>
        </>
        )
（略）

エラーは表示されなくなると。

省略しない記法だと、次の様な感じ。

import React from "react"
（略）
return (
        <React.Fragment>
           <h1>このブログについて</h1>
           <h2>GatsbyJSでSPA（Single Page Application）を始めてみる</h2>
           <p>SPA（Single Page Application）を始めるには色々な選択肢があって、どれを選べばいいんだろう？　と。</p>
        </React.Fragment>
        )
（略）

<>での省略記法と<React.Fragment>の記法は、全く同じものと思っていたんですが、異なる点があるとReactのドキュメントに書かれていました。

layout.js

このブログはgatsby-starter-blogを使っています。

src>components>layout.jsを使うと、（ReactのFragmentを使わずに）簡単に他のページと同じレイアウトにすることが出来ます。

import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
（略）
const siteTitle = data.site.siteMetadata?.title || `Title`
return (
        <Layout location={location} title={siteTitle}>
        <SEO title="About" />
           <h1>このブログについて</h1>
           <h2>GatsbyJSでSPA（Single Page Application）を始めてみる</h2>
           <p>SPA（Single Page Application）を始めるには色々な選択肢があって、どれを選べばいいんだろう？　と。</p>
        </Layout>
        )
（略）
© 2021 flabaka.com