React / JSX 動的コンポーネント：パターンとベストプラクティス

2024-04-02

React / JSX 動的コンポーネント名

変数を使う

コンポーネント名を格納する変数を用意し、その変数を JSX 内で展開することで、動的にコンポーネント名を設定できます。

const componentName = "MyComponent";

const App = () => {
  return (
    <div>
      <{componentName} />
    </div>
  );
};

useState フックを使ってコンポーネント名を状態変数として管理することで、動的にコンポーネント名を設定できます。

const [componentName, setComponentName] = useState("MyComponent");

const App = () => {
  return (
    <div>
      <{componentName} />
    </div>
  );
};

props を使う

親コンポーネントから子コンポーネントへ props としてコンポーネント名を渡すことで、動的にコンポーネント名を設定できます。

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent componentName="MyComponent" />
    </div>
  );
};

const ChildComponent = ({ componentName }) => {
  return (
    <div>
      <{componentName} />
    </div>
  );
};

switch 文を使う

複数のコンポーネントを切り替える場合、switch 文を使って動的にコンポーネント名を設定できます。

const App = () => {
  const componentName = "MyComponent";

  switch (componentName) {
    case "MyComponent":
      return <MyComponent />;
    case "AnotherComponent":
      return <AnotherComponent />;
    default:
      return null;
  }
};

高階関数を使ってコンポーネント名を動的に設定できます。

const withComponentName = (component) => (props) => {
  return <component {...props} />;
};

const App = () => {
  const componentName = "MyComponent";

  const MyComponentWithComponentName = withComponentName(MyComponent);

  return (
    <div>
      <MyComponentWithComponentName />
    </div>
  );
};

これらの方法の中から、状況に合わせて最適な方法を選択してください。

補足

上記の例は、あくまで基本的な例です。実際のユースケースに合わせて、コードを調整する必要があります。
動的にコンポーネント名を設定する場合は、パフォーマンスやメモリ使用量に注意する必要があります。

変数を使う

const componentName = "MyComponent";

const App = () => {
  return (
    <div>
      <{componentName} />
    </div>
  );
};

useState フックを使う

const [componentName, setComponentName] = useState("MyComponent");

const App = () => {
  return (
    <div>
      <{componentName} />
    </div>
  );
};

このコードでは、useState フックを使って componentName という状態変数を初期化しています。そして、setComponentName 関数を使って、componentName の値を動的に変更することができます。

props を使う

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent componentName="MyComponent" />
    </div>
  );
};

const ChildComponent = ({ componentName }) => {
  return (
    <div>
      <{componentName} />
    </div>
  );
};

このコードでは、ParentComponent から ChildComponent へ componentName という props を渡しています。ChildComponent では、props.componentName を使って、コンポーネント名を動的に設定しています。

switch 文を使う

const App = () => {
  const componentName = "MyComponent";

  switch (componentName) {
    case "MyComponent":
      return <MyComponent />;
    case "AnotherComponent":
      return <AnotherComponent />;
    default:
      return null;
  }
};

このコードでは、switch 文を使って、componentName の値に基づいてコンポーネントを切り替えています。

高階関数を使う

const withComponentName = (component) => (props) => {
  return <component {...props} />;
};

const App = () => {
  const componentName = "MyComponent";

  const MyComponentWithComponentName = withComponentName(MyComponent);

  return (
    <div>
      <MyComponentWithComponentName />
    </div>
  );
};

このコードでは、withComponentName という高階関数を使って、コンポーネント名

React / JSX でコンポーネント名を動的に設定する方法は、上記以外にもいくつかあります。

React.createElement を使う

const componentName = "MyComponent";

const App = () => {
  return (
    <div>
      {React.createElement(componentName)}
    </div>
  );
};

const componentName = "MyComponent";

const App = () => {
  return (
    <div>
      {eval(componentName)}
    </div>
  );
};

ただし、eval はセキュリティ上のリスクがあるため、使用は推奨されません。

ライブラリを使う

react-dynamic-component などのライブラリを使うと、コンポーネント名を動的に設定しやすくなります。

import ReactDynamicComponent from "react-dynamic-component";

const App = () => {
  const componentName = "MyComponent";

  return (
    <div>
      <ReactDynamicComponent componentName={componentName} />
    </div>
  );
};