#React で Component を複数個配置した時のエラー と return を囲む空タグの意味 / Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.

コード

import React from 'react';

import CircularProgress from '@material-ui/core/CircularProgress'

function App() {
  return (
    <CircularProgress />
    <CircularProgress />
    <CircularProgress />
  );
}

export default App;

エラー

解決

タグで囲めば良いらしい。

import React from 'react';

import CircularProgress from '@material-ui/core/CircularProgress'

function App() {
  return (
    <div>
      <CircularProgress />
      <CircularProgress />
      <CircularProgress />
    </div>
  );
}

export default App;

Fragment

より正しそうな書き方

import React from 'react';

import CircularProgress from '@material-ui/core/CircularProgress'

function App() {
  return (
    <React.Fragment>
      <CircularProgress />
      <CircularProgress />
      <CircularProgress />
  </React.Fragment>
  );
}

export default App;

空のタグ

エラー回避のハックだろうか？ 空のタグでも良いみたいだ。

import React from 'react';

import CircularProgress from '@material-ui/core/CircularProgress'

function App() {
  return (
    <>
      <CircularProgress />
      <CircularProgress />
      <CircularProgress />
    </>
  );
}

export default App;

と思ったら Fragment の短縮記法らしい。

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter