複数要素を返すコンポーネントの書き方
Reactのコンポーネントは、JSX構文を用いてUI要素を返しますが、返せるのは基本的に1つの親要素です。複数の要素を返したい場合は、以下のような方法でラップしてあげる必要があります。
フラグメント <>...</>
<React.Fragment>の省略記法も使用可能です。
const Example = () => {
return (
<>
<h1>タイトル</h1>
<p>本文テキスト</p>
</>
);
};keyを指定したい場合はFragmentでラップする
const Example = () => {
return (
<Fragment key={prop.id}>
<h1>タイトル</h1>
<p>本文テキスト</p>
</React.Fragment>
);
};`
`などの要素でラップする
最も一般的な方法は、親の`
`タグなどで全体を囲うことです。
“`tsx
const Example = () => {
return (
);
};
“`
**注意点：**
– レイアウト構造が増えるため、余計なHTML要素が生成される可能性があります。
—
タイトル
本文テキスト