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

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

React では、動的コンポーネント レンダリングを使用して、実行時のタイプに基づいてコンポーネントを作成できます。これを説明するために、次の例を考えてみましょう。

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent />

React/JSX 動的コンポーネント名スレッドで提案された以前の解決策では、構文の違いによりコンパイル エラーが発生しました。別の方法として、コンポーネントごとに個別のメソッドを作成することもできます。

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

ただし、このアプローチではコンポーネントごとに新しいメソッドが必要となり、煩雑になる可能性があります。

幸いなことに、より洗練されたソリューションでは、コンポーネント タイプを文字列として React.createElement() 関数に渡します。この関数は、指定されたタイプを使用してコンポーネントをレンダリングします。例:

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

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

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

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