React で JSX の作成をしていると、

import React from "react";

function App() {
  return (
    <div>今日の天気</div>
    <div>晴れ</div>
  );
}

export default App;

image2

『JSX expressions must have one parent element.』というエラーが発生します。

これは、return の中身に 2 つの親要素があるため、1 つの要素にまとめてください、というエラーです。

この JSX をdivで囲ってもいいのですが、

import React from "react"

function App() {
  return (
    <div>
      <div>今日の天気</div>
      <div>晴れ</div>
    </div>
  )
}

export default App

image3

不要なdiv要素が存在してしまいます。

不要な親要素を追加したくない場合、React.Fragmentを使用します。

親要素のdivReact.Fragmentへ書き換えます。

import React from "react"

function App() {
  return (
    <React.Fragment>
      <div>今日の天気</div>
      <div>晴れ</div>
    </React.Fragment>
  )
}

export default App

image4

不要なdiv要素がなくなりました。

別の方法として、単に空のタグ『』で囲うことも可能です。

import React from "react"

function App() {
  return (
    <>
      <div>今日の天気</div>
      <div>晴れ</div>
    </>
  )
}

export default App

image5

React.Fragmentと同じ結果になりました。

ブログ一覧