React: dynamic import jsx

Question

Questa domanda ha riguardato l'importazione dinamica di file JSX in React.

Fondamentalmente abbiamo un componente principale che rende dinamicamente altri componenti basati su una struttura memorizzata in un database. I componenti dinamici sono memorizzati in una sottodirectory "./Components". Definiamo in modo statico il questo come:

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

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

e rendiamo utilizzando:

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

Anche se questo funziona bene, è un po 'troppo statico per noi. Abbiamo 100+ componenti (CompA/CompBs) e definirli staticamente non funziona.

È possibile importare tutti i file JSX in "./Compontents" e popolare l'array di componenti?

E, cosa sarebbe davvero (davvero) bello se potessimo inviare il percorso "./Components" come supporto ai componenti principali. E il componente principale userebbe questo percorso per importare i file .jsx. Come questo:

<MainComponent ComponentPath="./SystemComponents"> 

userei "./SystemComponents", come percorso per i file .JSX e:

<MainComponent ComponentPath="./UserComponents"> 

userei "./UserComponents" come percorso di importazione.

Answer 1

Cosa ne dite di una componentistica/index.js con contenuti:

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

Poi si fa:

import * as Components from "./components" 

allora si dovrebbe utilizzare come:

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

Spero che questo aiuti .

Dubito che sia possibile caricare qualsiasi cosa quando si invia il percorso attraverso i componenti del componente, il caricamento del file dovrebbe quindi avvenire all'interno dei metodi del ciclo di vita dei componenti React che non è qualcosa che consiglierei.

Answer 2

Per completare la risposta di @ gor181, posso aggiungere che export s devono essere in questo modo:

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

Spero che questo potrebbe essere utile.