React/JSX でコンポーネントを動的にレンダリングするにはどうすればよいですか?

React/JSX での動的コンポーネント レンダリング

React の JSX では宣言型コンポーネント レンダリングが可能ですが、場合によっては開発者が以下に基づいてコンポーネントを動的にレンダリングする必要がある場合があります。

問題

以下のコード スニペットを使用してコンポーネントを動的にレンダリングしようとすると、エラーが発生します:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Error: expected XML, got array

このエラーは、JSX が XML を予期しているのに、コードでは配列構文が使用されているために発生します。コンポーネントごとにメソッドを作成するなど、他のソリューションはエレガントではありません。

ソリューション

React ドキュメントでは、動的コンポーネント レンダリングの公式ソリューションが提供されるようになりました。

const MyComponent = Components[type + "Component"];
return <MyComponent />;

このコードは次のようにコンパイルされます:

const MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

変数 MyComponent はコンポーネント クラスを格納し、大文字で始まります。次に、React.createElement 関数はこのクラスを使用してコンポーネント要素を作成します。

以上がReact/JSX でコンポーネントを動的にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。