प्रतिक्रिया: गतिशील आयात jsx

Question

यह सवाल प्रतिक्रियाशील रूप से जेएसएक्स फ़ाइलों को आयात करने से संबंधित है।

असल में हमारे पास एक मुख्य घटक है जो डेटाबेस में संग्रहीत संरचना के आधार पर गतिशील रूप से अन्य घटकों को प्रस्तुत करता है। गतिशील घटक उपनिर्देशिका "./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+ घटक (कॉम्पा/कॉम्प) हैं और स्थिर रूप से परिभाषित करते हैं कि वे काम नहीं करते हैं।

क्या सभी जेएसएक्स फ़ाइलों को "./compontents" में आयात करना संभव है और घटक-सरणी को पॉप्युलेट करना संभव है?

और, वास्तव में क्या होगा (वास्तव में) अच्छा होगा अगर हम मुख्य घटक के लिए "./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 /> 
... 

आशा इस मदद करता है ।

मुझे संदेह है कि आप घटक प्रोप के माध्यम से पथ भेजते समय कुछ भी लोड कर सकते हैं, फ़ाइल को लोड करना प्रतिक्रिया घटक जीवन चक्र विधियों के अंदर होना चाहिए जो कुछ ऐसा नहीं है जो मैं मानता हूं।

Answer 2

@ gor181 के जवाब की मदद के लिए मैं जोड़ सकते हैं कि export रों इस तरह से होना चाहिए:

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

आशा यह सहायक हो सकता है।