Diese Frage bezog sich auf das dynamische Importieren von JSX-Dateien in React.

rundsätzlich haben wir eine Hauptkomponente, die andere Komponenten basierend auf einer in einer Datenbank gespeicherten Struktur dynamisch rendert. Die dynamischen Komponenten werden in einem Unterverzeichnis "./Components" gespeichert. Wir definieren dies statisch als:

import CompA  from './Components/CompA';
import CompB  from './Components/CompB';

var components = {
 'CompA': CompA,
 'CompB': CompB
}

und wir rendern sie mit:

var type = 'CompA' 
var Component = components[type];
...
<Component />

Während dies gut funktioniert, ist es für uns etwas zu statisch. Wir haben mehr als 100 Komponenten (CompA / CompBs) und statisch zu definieren, funktioniert nicht.

Ist es möglich, alle JSX-Dateien in "./Compontents" zu importieren und das Komponenten-Array zu füllen?

Und was wirklich (wirklich) schön wäre, wenn wir den Pfad "./Components" als Requisite an die Hauptkomponenten senden könnten. Die Hauptkomponente würde diesen Pfad zum Importieren der JSX-Dateien verwenden. So was

<MainComponent ComponentPath="./SystemComponents">

Würde "./SystemComponents" als Pfad für .JSX-Dateien verwenden und:

<MainComponent ComponentPath="./UserComponents">

Würde "./UserComponents" als Importpfad verwenden.