GatsbyJSでReactのFragmentを使うには?

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