ホームページ  >  記事  >  ウェブフロントエンド  >  React/JSX でコンポーネントを動的にレンダリングするにはどうすればよいですか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-15 14:12:02414ブラウズ

How to Dynamically Render Components in 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。