問題一覧に戻る
中級高度なパターン
問題61: 動的なコンポーネント

条件に応じてコンポーネントを動的に選択する方法を学びます。コンポーネントをオブジェクトに格納し、キーで参照してレンダリングします。このパターンにより、ルーティング、タブ切り替え、機能別コンポーネントの選択などが柔軟に実装できます。コンポーネント名を変数として扱う際は、大文字で始まる変数名にしてJSXとしてレンダリングできるようにします。

import React, { useState } from 'react';

const Welcome = () => <h1>Welcome</h1>;
const Goodbye = () => <h1>Goodbye</h1>;

{/* コンポーネントマップ */}
const components = {
  welcome: ,
  goodbye: Goodbye
};

function App() {
  const [type, setType] = useState("welcome");
  
  {/* 動的コンポーネント選択 */}
  const Component = components[];
  
  return (
    <div>
      <button onClick={() => setType("welcome")}>Welcome</button>
      <button onClick={() => setType("goodbye")}>Goodbye</button>
      {/* 動的コンポーネントをレンダー */}
      < />
    </div>
  );
}

export default App;
···