Reagieren: dynamischer Import jsx

Question

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

Grundsä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 statisch die dies als:

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

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

und wir machen sie mit:

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

Während dies funktioniert, ist es für uns ein bisschen zu statisch ist. Wir haben 100+ Komponenten (CompA/CompBs) und statisch definieren sie nicht funktioniert.

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

Und was wäre wirklich (wirklich) schön, wenn wir den Pfad "./Components" als Prop zu den Hauptkomponenten senden könnten. Und die Hauptkomponente würde diesen Pfad verwenden, um die .jsx-Dateien zu importieren. Wie folgt aus:

<MainComponent ComponentPath="./SystemComponents"> 

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

<MainComponent ComponentPath="./UserComponents"> 

Würde "./UserComponents" als Import-Pfad verwenden.

Answer 1

Was für eine Komponenten/index.js mit Inhalt zu haben:

export CompA from "./comp_a"; 
export CompB from "./comp_b"; 

Dann Sie tun:

import * as Components from "./components" 

dann würden Sie verwenden als:

<Components.CompA /> 
<Components.CompB /> 
... 

this helps .

Ich bezweifle, dass Sie etwas laden können, wenn Sie den Pfad durch Komponentenrequisiten senden, das Laden der Datei sollte dann innerhalb der React-Komponentenlebenszyklus-Methoden geschehen, was ich nicht empfehlen würde.

Answer 2

Um @ gor181 Antwort ergänzen, ich kann hinzufügen, dass export s auf diese Weise sein muss:

export { default as CompA } from "./comp_a"; export { default as CompB } from "./comp_b";

Hoffnung könnte dies hilfreich sein.