Wie man eine Komponente nach String-Namen rendern kann

Question

Ich kann anscheinend keine Komponenten mit Namenszeichenfolgen darstellen. Ich wollte in der Lage sein, dynamisch Komponentennamen-Strings zu generieren, die entsprechende Komponenten haben, die gerendert werden können.

Die array const wird über JSON-Daten aufgefüllt, deshalb muss ich string Werte für die Identifizierung der Komponente verwenden. Hier

ist, was ich versuche zu tun:

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

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

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

Statt Verweisen auf die vorhandene Komponente und Rendering es, Reaktion ein eigenes Element-Tag-Rendering, die alle Kleinbuchstaben ist.

HINWEIS: diese Komponenten ['Module1', 'Module2', 'Module3'] erstellt werden als extends Component

Answer 1

Sie die Komponenten in einem Objekt setzen und auf sie zugreifen, die Strings als Schlüssel verwenden.

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 />; 
})}