Reactで複数行JSXを返す方法

Reactで複数の行のJSXを別のreturn文から返す方法の日本語解説

Reactでは、通常、コンポーネントのレンダリング結果を一つのreturn文で返します。しかし、特定の条件や複雑なロジックに基づいて、複数の行のJSXを別のreturn文から返す必要がある場合があります。

条件文 (Conditional Rendering)

• if文や三項演算子を使って、条件に基づいて異なるJSXを返すことができます。

function MyComponent() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

配列のマップ (Mapping Arrays)

• 配列の各要素に対してJSXを生成し、それらを配列に格納して返すことができます。

function MyComponent() {
  const items = ['item1', 'item2', 'item3'];

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

フラグメント (Fragments)

• 複数のJSX要素を一つの親要素なしに返すために、<React.Fragment>を使用します。

function MyComponent() {
  return (
    <React.Fragment>
      <p>Line 1</p>
      <p>Line 2</p>
    </React.Fragment>
  );
}

関数呼び出し (Function Calls)

• JSXの内部で関数を呼び出し、その戻り値をJSXとしてレンダリングすることができます。

function renderGreeting(name) {
  return <p>Hello, {name}!</p>;
}

function MyComponent() {
  const userName = 'Alice';

  return (
    <div>
      {renderGreeting(userName)}
    </div>
  );
}

Reactで複数行JSXを返す方法のコード解説

function MyComponent() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

• 解説
  
  • isLoggedInがtrueの場合、Welcome, user!というメッセージを表示します。
  • isLoggedInがfalseの場合、Please log in.というメッセージを表示します。

function MyComponent() {
  const items = ['item1', 'item2', 'item3'];

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

• 解説
  
  • items配列の各要素に対して、<li>要素を生成し、リストに表示します。
  • key属性はReactのリストレンダリングの最適化に役立ちます。

function MyComponent() {
  return (
    <React.Fragment>
      <p>Line 1</p>
      <p>Line 2</p>
    </React.Fragment>
  );
}

function renderGreeting(name) {
  return <p>Hello, {name}!</p>;
}

function MyComponent() {
  const userName = 'Alice';

  return (
    <div>
      {renderGreeting(userName)}
    </div>
  );
}

• 解説
  
  • renderGreeting関数を呼び出し、その戻り値をJSXとしてレンダリングします。
  • 関数内でJSXを生成し、それを返すことで、コードの再利用性と可読性を向上させることができます。

テンプレートリテラル (Template Literals)

• JSXの代わりにテンプレートリテラルを使用することで、複数の行のJSXをより柔軟に表現できます。

function MyComponent() {
  const name = 'Alice';

  return (
    <div>
      <p>{`Hello, ${name}!`}</p>
    </div>
  );
}

JSXの分割 (JSX Splitting)

• JSXを複数の行に分割し、変数に格納して、後で結合することができます。

function MyComponent() {
  const firstLine = <p>Line 1</p>;
  const secondLine = <p>Line 2</p>;

  return (
    <div>
      {firstLine}
      {secondLine}
    </div>
  );
}

カスタムフック (Custom Hooks)

• 複雑なロジックや状態管理をカプセル化するために、カスタムフックを作成し、その中でJSXを生成することができます。

function useGreeting(name) {
  return <p>Hello, {name}!</p>;
}

function MyComponent() {
  const userName = 'Alice';
  const greeting = useGreeting(userName);

  return (
    <div>
      {greeting}
    </div>
  );
}

条件演算子 (Conditional Operator)

• より簡潔な条件分岐のために、条件演算子を使用することができます。

function MyComponent() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Welcome, user!</p>}
      {!isLoggedIn && <p>Please log in.</p>}
    </div>
  );
}