[解決済み】React / JSXの動的なコンポーネントの名前

質問

私は、コンポーネントをそのタイプに基づいて動的にレンダリングしようとしています。

例えば

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

ここで提案されている解決策を試してみました React/JSXの動的コンポーネント名

これはコンパイル時にエラーが発生しました（gulpのbrowserifyを使用）。配列構文を使っているところ、XMLを期待していたのです。

すべてのコンポーネントにメソッドを作成することで解決できました。

newExampleComponent() {
    return <ExampleComponent />;
}

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

しかし、それでは私が作るコンポーネントごとに新しいメソッドを作ることになります。この問題にはもっとエレガントな解決策があるはずです。

提案には大いに期待しています。

どのように解決するのですか？

<MyComponent /> は、以下のようにコンパイルされます。 React.createElement(MyComponent, {}) これは、最初のパラメータとして文字列 (HTML タグ) または関数 (ReactClass) を期待します。

コンポーネントクラスを大文字で始まる名前の変数に格納すればいいんです。例えば HTMLタグとReact Componentsの比較 .

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

は、次のようにコンパイルされます。

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