Реакция: динамический импорт jsx

Question

Этот вопрос связан с динамическим импортом файлов JSX в React.

В принципе у нас есть один основной компонент, который динамически отображает другие компоненты на основе структуры, хранящейся в базе данных. Динамические компоненты хранятся в подкаталоге «./Components». Мы статически определить это как:

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

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

и мы предоставляем им с помощью:

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

Хотя это работает отлично, это немного слишком статичным для нас. У нас есть еще 100 компонентов (CompA/CompBs), и статическое их определение не работает.

Можно ли импортировать все файлы JSX в «./Compontents» и заполнить компоненты-массивы?

И что было бы действительно (действительно) приятно, если бы мы могли послать путь «./Components» в качестве опоры для основных компонентов. И основной компонент будет использовать этот путь для импорта файлов .jsx. Как это:

<MainComponent ComponentPath="./SystemComponents"> 

использовать ли "./SystemComponents" в качестве пути для .JSX файлов и:

<MainComponent ComponentPath="./UserComponents"> 

использовать ли "./UserComponents" в качестве пути импорта.

Answer 1

Что о наличии компонентов/index.js с содержанием:

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

Тогда вы:

import * as Components from "./components" 

, то вы бы использовать как:

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

Надеется, что это помогает ,

Я сомневаюсь, что вы можете загружать что-либо при отправке пути через компонентные реквизиты, тогда загрузка файла должна происходить внутри методов жизненного цикла компонента React, что я бы не рекомендовал.

Answer 2

В дополнение ответа @ gor181, я могу добавить, что export s должен быть так:

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

Надеется, что это может быть полезным.