#React で Component を複数個配置した時のエラー と return を囲む空タグの意味 / Parsing error:

コード

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 の短縮記法らしい。

https://reactjs.org/docs/fragments.html#short-syntax

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3038

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2020-03-17