Reactで別のreturn文で複数の行のJSXを返す方法

フラグメントを使用する方法: React 16以降では、フラグメントを使用して複数の要素をラップすることができます。フラグメントはDOMに追加されず、余分な要素を生成しません。

import React from 'react';
function MyComponent() {
  return (
    <>
      <h1>タイトル</h1>
      <p>文章1</p>
      <p>文章2</p>
    </>
  );
}
export default MyComponent;

配列を使用して要素を返す方法: JSX要素を配列に格納し、配列をreturn文で返すこともできます。ただし、各要素に一意のキー属性を指定する必要があります。

import React from 'react';
function MyComponent() {
  return [
    <h1 key="title">タイトル</h1>,
    <p key="paragraph1">文章1</p>,
    <p key="paragraph2">文章2</p>
  ];
}
export default MyComponent;

どちらの方法でも、複数の行のJSXを別のreturn文で返すことができます。選択する方法は、コードの読みやすさやパフォーマンスの要件に応じて異なる場合があります。適切な方法を選択し、コンポーネント内で使用してください。