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

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

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

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">

использовать "./Системные компоненты" как путь для .JSX файлы и:

<MainComponent ComponentPath="./UserComponents">

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

6
reactjs

2 ответов

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

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

вы тут:

import * as Components from "./components"

тогда вы будете использовать как:

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

надеюсь, что это помогает.

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

8

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

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

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

0