React で動的コンポーネントを選択する

React で複数のコンポーネントのうち 1 つをレンダリングするには、許可された各カテゴリをコンポーネント関数に対応付け、選択された関数を検索し、大文字で始まる JSX 変数を通してレンダリングします。"text" のようなカテゴリ文字列でコンポーネントを選ぶことはできますが、コンポーネント名を文字列として組み立てても、その文字列が JavaScript 変数への参照になるわけではありません。

動的コンポーネント名と JSX

JSX は UI を記述するための構文であり、コンポーネントを検索するための独立した仕組みではありません。JSX では、<section> のような小文字の名前は組み込みの HTML 要素を表し、<SomeComponent /> のような大文字で始まる識別子はスコープ内の JavaScript 変数を指します。その変数には、コンポーネント関数またはその他の対応するコンポーネント型が格納されていなければなりません。

JSX はプロジェクトのコンパイラ設定に従って変換されます。React.createElement を使う構成もあれば、別のランタイムを使う構成もあり、生成される正確な呼び出しは設定に依存します。React.createElement は、対応する要素型と props が与えられたときに React 要素を作成できる関数です。

React の動的コンポーネント名

ブログがテキスト、ビデオ、または画像のコンテンツを表示できるとします。まずそれらのコンポーネントを定義し、次にそれらの参照の中から選択します。名前を連結しても、文字列が生成されるだけです。

const SomeComponent = category + "Component";

たとえば、category が "Text" の場合、SomeComponent は "TextComponent" になります。JSX はその文字列を使って、同じ名前の変数を JavaScript スコープ内で検索することはしません。文字列は、文字列の要素型をサポートする API では組み込みの HTML タグを表すことができますが、カスタムコンポーネントの変数を解決することはしません。文字列の大文字・小文字を変更しても、その型は変わらず、コンポーネントへの参照になることもありません。

React で動的コンポーネント名を使用する正しい方法

許可されたカテゴリ値から、すでに定義済みのコンポーネントへの明示的なマッピングを作成します。選択された参照を検索し、そのカテゴリがサポートされていることを確認して、大文字で始まる JSX 識別子を使ってその参照をレンダリングします。

この完全な JavaScript の例では、コンポーネントの選択肢を 1 つの許可リストオブジェクトにまとめています。各関数はラベルを返すため、選択の流れを React のビルド設定なしで Node.js で実行できます。

function TextComponent() {
  return "Text content";
}

function VideoComponent() {
  return "Video content";
}

function PictureComponent() {
  return "Picture content";
}

const componentByCategory = {
  text: TextComponent,
  video: VideoComponent,
  picture: PictureComponent
};

const category = "text";

if (Object.hasOwn(componentByCategory, category)) {
  const SelectedComponent = componentByCategory[category];
  console.log(SelectedComponent());
} else {
  console.log("Unsupported category");
}

Text content

React コンポーネントでは、マッピングを読み取る前に同じ自前のキーの確認を行い、次に JSX を使って選択された参照をレンダリングします。たとえば return <SelectedComponent />; のようにします。カテゴリがサポートされるのは、それが componentByCategory の自前のキーである場合のみです。toString のような継承された名前もフォールバックに回ります。存在しない参照をレンダリングしようとするのではなく、フォールバックコンポーネントやメッセージなど、インターフェースに何を表示すべきかを選択してください。このマッピングは許可リストとして維持してください。ユーザー入力は定義されたエントリのいずれかを選択できますが、任意のコンポーネント名やインポートパスになってはなりません。

提供されている CodeSandbox の例 を使うと、元のテキスト、ビデオ、画像コンポーネントの構成を試すことができます。アプリケーションでは、例のカテゴリをユーザーが選択した値に置き換え、明示的なマッピングとフォールバックの動作を維持してください。