最近React
入門したので、Webフロント周りも記事にしていこうと思います👷♀️
結論
JSXで下記のようなものを書いてたら、エラーに出くわした。
public render() { return ( <div> hoge </div> <div> hoge </div> ) }
Parsing error: JSX expressions must have one parent element
どうやら、JSXでは二つの要素を返却することができないっぽいですね。ということで、下記のように修正。React.Fragment
は複数の要素をグルーピングするためのタグで、HTMLのタグとしては出力されないので、<div>
でまとめるよりスマートに書くことができます。
public render() { return ( <React.Fragment> <div>hoge</div> <div>hoge</div> </React.Fragment> ) }
てな感じで本日は以上となります🍺
参考
- https://www.soudegesu.com/post/javascript/react-jsx-placement/
- https://e-words.jp/w/%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%82%B7%E3%83%A5%E3%82%AC%E3%83%BC.html#:~:text=%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%82%B7%E3%83%A5%E3%82%AC%E3%83%BC%E3%81%A8%E3%81%AF,%E3%81%9F%E3%82%81%E3%81%AB%E7%94%A8%E6%84%8F%E3%81%95%E3%82%8C%E3%82%8B%E3%80%82