文字列名でコンポーネントをレンダリングする方法

Question

名前文字列を使用してコンポーネントをレンダリングできないようです。私は、レンダリング可能な既存の対応するコンポーネントを持つコンポーネント名文字列を動的に生成できるようにしたいと考えていました。

array constはJSONデータを使用して作成されるため、コンポーネントを識別するためにstringの値を使用する必要があります。ここで

は私がやろうとしているものです：

import Module1 from './module1'; 
import Module2 from './module2'; 
import Module3 from './module3'; 

const array = ['Module1', 'Module2', 'Module3']; 

{array.map((Module, index) => 
<Module /> 
)} 

代わりに既存のコンポーネントを参照し、それをレンダリングする、反応するすべて小文字であるカスタム要素タグをレンダリングしています。

注：これらのコンポーネント['Module1', 'Module2', 'Module3']は、あなたがオブジェクト内のコンポーネントを入れて、キーとして文字列を使用してそれらにアクセスすることができextends Component

Answer 1

として作成されます。

import Module1 from './module1'; 
import Module2 from './module2'; 
import Module3 from './module3'; 

const array = ['Module1', 'Module2', 'Module3']; 

const modules = { 
    Module1, 
    Module2, 
    Module3, 
}; 

{moduleOrderArr.map((key, index) => { 
    const Module = modules[key]; 
    return <Module />; 
})}