ReactJS - घटक आयात नहीं कर सकता

Question

मैं ReactJS के लिए नया ब्रांड हूं। मैं एक छोटा सा पेज ऐप विकसित कर रहा हूं और मैं अपने मुख्य घटक के भीतर आयात करने के लिए अपने घटकों को बनाने की कोशिश कर रहा हूं।

TestComponent.jsx

import React from 'react' 

export class TestComponent extends React.Component { 

    render() { 
     return (
      <div className="content">Test Component</div> 
     ) 
    } 
} 

अंदर मेरी main.jsx मैं इस घटक बुला

import TestComponent from './components/TestComponent.jsx' 

तो मैं एक विशिष्ट मार्ग के लिए अपने घटक कॉल करने के लिए कोशिश की है आयात किया है

:

render(
    (<Router history={history}> 
     <Route path="/" component={NavMenu}> 
      <IndexRoute component={Index}/> 
      <Route path="test" component={TestComponent}></Route> 
     </Route> 
    </Router>), 
    document.getElementById('main') 
) 

मुझे कंसोल से कोई त्रुटि नहीं मिली है, लेकिन मुझे मेरा घटक नहीं दिख रहा है। मैं क्या गलत कर रहा हूं?

Answer 1

घुंघराले ब्रेसिज़ के बिना आयात वाक्यविन्यास डिफ़ॉल्ट निर्यात आयात करने के लिए है, नामित निर्यात आयात करने के लिए नहीं।

अपने घटक डिफ़ॉल्ट निर्यात करें:

TestComponent.jsx

import React from 'react' 

export default class TestComponent extends React.Component { 

    render() { 
     return (
      <div className="content">Test Component</div> 
     ) 
    } 
} 

वैकल्पिक रूप से आप यह आयात करने के लिए के रूप में यह निम्न आयात बयान के साथ है सक्षम होना चाहिए:

import { TestComponent } from './components/TestComponent.jsx' 

यदि आप अपने प्रतिक्रिया कोड में ES6 का उपयोग करना चाहते हैं तो आप ES6 मॉड्यूल (उदाहरण के लिए Exploring ES6) पर पढ़ना चाहेंगे ।