Esta pergunta estava relacionada à importação dinâmica de arquivos JSX para o React.

Basicamente, temos um componente principal que renderiza dinamicamente outros componentes com base em uma estrutura armazenada em um banco de dados. Os componentes dinâmicos são armazenados em um subdiretório "./Components". Estaticamente, definimos isso como:

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

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

e nós os renderizamos usando:

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

Enquanto isso funciona bem, é um pouco estático para nós. Temos mais de 100 componentes (CompA / CompBs) e defini-los estaticamente não funciona.

É possível importar todos os arquivos JSX em "./Compontents" e preencher a matriz de componentes?

E o que seria muito (muito) legal seria se pudéssemos enviar o caminho "./Components" como um suporte para os principais componentes. E o componente principal usaria esse caminho para importar os arquivos .jsx. Como isso:

<MainComponent ComponentPath="./SystemComponents">

Usaria "./SystemComponents" como caminho para arquivos .JSX e:

<MainComponent ComponentPath="./UserComponents">

Usaria "./UserComponents" como caminho de importação.