React：dynamic import jsx

Question

この質問は、JSXファイルをReactに動的にインポートすることに関するものです。

基本的に、データベースに格納されている構造に基づいて他のコンポーネントを動的にレンダリングする主なコンポーネントが1つあります。動的コンポーネントは、サブディレクトリ "./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）を持っていて、それらを静的に定義しても機能しません。

"./Compontents"内のすべてのJSXファイルをインポートしてcomponents-arrayに取り込むことはできますか？

そして、 "./Components"パスをメインコンポーネントの小道具として送ることができれば、本当に（本当に）いいと思います。また、メインコンポーネントはこのパスを使用して.jsxファイルをインポートします。このように：

<MainComponent ComponentPath="./SystemComponents"> 

.jsxのファイルのパスとして "./SystemComponents" を使用してます：

<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コンポーネントのライフサイクルメソッド内で実行する必要があります。 gor181の答え@補完するために

Answer 2

、私はexport sがこのようでなければならないことを追加することができます。これは役に立つかもしれません

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

ホープ。