प्रतिक्रिया + ES6 + वेबपैक का उपयोग करके घटकों को आयात और निर्यात कैसे करें?

Question

मैं के साथ चारों ओर खेल रहा हूँ Reactऔर ES6का उपयोग कर babelऔर webpack। मैं अलग-अलग फ़ाइलों में कई घटकों का निर्माण करना चाहता हूं, एक ही फाइल में आयात करता हूं और उन्हें बंडल करता हूंwebpack

मान लीजिए कि मेरे पास कुछ घटक हैं:

मेरी-navbar.jsx

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

मुख्य-page.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import MyNavbar from './comp/my-navbar.jsx';

export class MyPage extends React.Component{
  render(){
    return(
        <MyNavbar />
        ...
    );
  }
}

ReactDOM.render(
  <MyPage />,
  document.getElementById('container')
);

वेबपैक का उपयोग करना और उनके ट्यूटोरियल का अनुसरण करना, मेरे पास है main.js:

import MyPage from './main-page.jsx';

प्रोजेक्ट बनाने और उसे चलाने के बाद, मुझे अपने ब्राउज़र कंसोल में निम्न त्रुटि मिलती है:

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.

मैं क्या गलत कर रहा हूं? मैं अपने घटकों को ठीक से कैसे आयात और निर्यात कर सकता हूं?

Comments

exportयहाँ कीवर्ड विवरण । वर्तमान में यह किसी भी वेब-ब्राउज़र द्वारा मूल रूप से समर्थित नहीं है।

— आरबीटी

Answer 1

अपने घटकों में डिफ़ॉल्ट रूप से निर्यात को आज़माएं :

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

डिफ़ॉल्ट रूप से आप एक्सप्रेस का उपयोग करके उस मॉड्यूल में सदस्य होने जा रहे हैं जो कि यदि कोई विशिष्ट सदस्य नाम प्रदान नहीं किया जाता है तो आयात किया जाएगा। आप यह भी व्यक्त कर सकते हैं कि आप ऐसा करके MyNavbar नामक विशिष्ट सदस्य को आयात करना चाहते हैं: {@ ./comp/my-navbar.jsx 'से {MyNavbar} आयात करें; इस मामले में, किसी डिफ़ॉल्ट की आवश्यकता नहीं है

Comments

यह मेरे लिए काम नहीं करता है। अपने प्रोजेक्ट में इसे चलाते समय मुझे यह कहते हुए त्रुटि हो जाती है कि यह घटक आयात नहीं कर सकता। कोई विचार क्यों?

— BHUwens

डिफ़ॉल्ट रूप से आप एक्सप्रेस का उपयोग करके उस मॉड्यूल में सदस्य होने जा रहे हैं जो कि यदि कोई विशिष्ट सदस्य नाम प्रदान नहीं किया जाता है तो आयात किया जाएगा। आप यह भी व्यक्त कर सकते हैं कि आप ऐसा करके MyNavbar नामक विशिष्ट सदस्य को आयात करना चाहते हैं: {/ ./comp/my-navbar.jsx 'से {MyNavbar} आयात करें; इस मामले में, किसी भी डिफ़ॉल्ट की आवश्यकता नहीं है

— एमिलियो रोड्रिगेज

Answer 2

कोई डिफ़ॉल्ट निर्यात नहीं होने पर ब्रेसिज़ के साथ रैपिंग घटक:

import {MyNavbar} from './comp/my-navbar.jsx';

या एकल मॉड्यूल फ़ाइल से कई घटकों को आयात करें

import {MyNavbar1, MyNavbar2} from './module';

Comments

यह स्वीकृत उत्तर होना चाहिए। ये named exportses6 में हैं और डेवलपर.default

— mozilla.org/en/docs/web/javascript/reference/…

"ब्रेक के साथ घटक लपेटना यदि कोई डिफ़ॉल्ट निर्यात नहीं करता है" तो पर्याप्त है। Tnx

— यूजेन सनिक

शायद यह मदद कर सकता है: मेरे मामले में यह पथ के भीतर '/' याद आ रही थी। यह थोड़ा अजीब लगता है क्योंकि घटक समान फ़ोल्डर स्तर पर है।

— एलेसेंड्रो डीएस

Answer 3

ES6 में एकल घटक निर्यात करने के लिए, आप export defaultनिम्नानुसार उपयोग कर सकते हैं :

class MyClass extends Component {
 ...
}

export default MyClass;

और अब आप उस मॉड्यूल को आयात करने के लिए निम्न सिंटैक्स का उपयोग करते हैं:

import MyClass from './MyClass.react'

यदि आप एक एकल फ़ाइल से कई घटकों को निर्यात करना चाह रहे हैं तो घोषणा कुछ इस तरह दिखाई देगी:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

और अब आप उन फ़ाइलों को आयात करने के लिए निम्न सिंटैक्स का उपयोग कर सकते हैं:

import {MyClass1, MyClass2} from './MyClass.react'

Answer 4

मॉड्यूल आयात करने और निर्यात करने के सभी नए तरीकों के लिए MDN वास्तव में अच्छा दस्तावेज है ES 6 आयात-एमडीएन । आपके प्रश्न के संबंध में इसका संक्षिप्त विवरण आप या तो दे सकते हैं:

1. उस घटक को घोषित किया गया था जिसे आप 'डिफ़ॉल्ट' घटक के रूप में निर्यात कर रहे थे जो कि यह मॉड्यूल निर्यात कर रहा था: export default class MyNavbar extends React.Component { और इसलिए अपने 'MyNavbar' को आयात करते समय आपको इसके चारों ओर घुंघराले ब्रेसिज़ लगाने होंगे import MyNavbar from './comp/my-navbar.jsx';:। आयात के चारों ओर घुंघराले ब्रेसिज़ नहीं डालना हालांकि दस्तावेज़ को बता रहा है कि इस घटक को 'निर्यात डिफ़ॉल्ट' के रूप में घोषित किया गया था। यदि यह नहीं था, तो आपको एक त्रुटि मिलेगी (जैसा आपने किया था)।

2. यदि आप इसे निर्यात करते समय अपने 'MyNavbar' को डिफ़ॉल्ट निर्यात घोषित नहीं करना चाहते थे: export class MyNavbar extends React.Component { तो आपको 'MyNavbar के अपने आयात को घुंघराले ब्रेसिज़ में लपेटना होगा: import {MyNavbar} from './comp/my-navbar.jsx';

मुझे लगता है कि चूँकि आपके पास केवल एक घटक था आपके './comp/my-navbar.jsx' फ़ाइल में यह डिफ़ॉल्ट निर्यात करने के लिए अच्छा है। यदि आपके पास MyNavbar1, MyNavbar2, MyNavbar3 जैसे अधिक घटक थे, तो मैं या तो उन्हें डिफ़ॉल्ट नहीं बनाऊंगा या किसी मॉड्यूल के चयनित घटकों को आयात करने के लिए जब मॉड्यूल ने किसी एक चीज को डिफ़ॉल्ट घोषित नहीं किया है जिसका आप उपयोग कर सकते हैं: import {foo, bar} from "my-module";जहां foo और बार आपके मॉड्यूल के कई सदस्य हैं।

निश्चित रूप से MDN डॉक्टर को पढ़ें यह वाक्य रचना के लिए अच्छे उदाहरण हैं। उम्मीद है कि यह ईएस 6 और घटक आयात / निर्यात के साथ खिलौना की तलाश में किसी और के लिए स्पष्टीकरण के साथ मदद करता है।

Answer 5

मुझे आशा है कि यह हेल्पफुल है

चरण 1: App.js (मुख्य मॉड्यूल) लॉगिन मॉड्यूल आयात करता है

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

चरण 2: लॉगिन फोल्डर बनाएं और login.js फ़ाइल बनाएं और अपनी आवश्यकताओं को इसे स्वचालित रूप से अनुकूलित करें।

import React, { Component } from 'react';
import '../login/login.css';

class Login extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default Login;

Answer 6

प्रतिक्रिया में घटकों को आयात करने के दो अलग-अलग तरीके हैं और अनुशंसित तरीका घटक तरीका है

1. लाइब्रेरी तरीका (अनुशंसित नहीं)
2. घटक तरीका (अनुशंसित)

PFB विस्तार से व्याख्या

आयात करने का पुस्तकालय तरीका

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

यह अच्छा और आसान है, लेकिन यह बटन और फ्लैटबटन (और उनकी निर्भरता) लेकिन पूरे पुस्तकालयों को न केवल बंडल करता है।

आयात करने का घटक तरीका

इसे कम करने का एक तरीका यह है कि केवल आयात या आवश्यकता के लिए प्रयास किया जाए, जो घटक का तरीका बताता है। उसी उदाहरण का उपयोग करना:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

यह केवल बटन, फ्लैटबटन और उनकी संबंधित निर्भरता को बंडल करेगा। लेकिन पूरी लाइब्रेरी नहीं। इसलिए मैं आपके सभी पुस्तकालय आयातों से छुटकारा पाने और इसके बजाय घटक तरीके का उपयोग करने की कोशिश करूंगा।

यदि आप बहुत सारे घटकों का उपयोग नहीं कर रहे हैं, तो यह आपकी बंडल फ़ाइल का आकार काफी कम कर देना चाहिए।