क्यों es6 प्रतिक्रिया घटक केवल "निर्यात डिफ़ॉल्ट" के साथ काम करता है?

Question

यह घटक काम करता है:

export class Template extends React.Component {
    render() {
        return (
            <div> component </div>
        );
    }
};
export default Template;

अगर मैं अंतिम पंक्ति को हटाता हूं, तो यह काम नहीं करता है।

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

मुझे लगता है, मुझे es6 सिंटैक्स में कुछ समझ में नहीं आता है। क्या यह बिना हस्ताक्षर "डिफ़ॉल्ट" के लिए निर्यात नहीं करना है?

Comments

आप के रूप में लिख सकते हैं export default class Template extends React.Component {

— andykenward

मुझे पता है। लेकिन मैं उस घटक को कैसे आयात कर सकता हूं जो "डिफ़ॉल्ट" के बिना निर्यात किया गया था? यह संभव होना चाहिए

— stkvtflw 10

@stkvtflw यदि मैंने आपके प्रश्न का उत्तर दिया है तो कृपया इसे स्वीकार करें ताकि अन्य उपयोगकर्ता भी लाभान्वित हो सकें।

— जेड रिचर्ड्स 11

Answer 1

बिना निर्यात का defaultमतलब है कि यह "निर्यात नाम" है। आपके पास एकल फ़ाइल में एकाधिक नाम वाले निर्यात हो सकते हैं। तो अगर आप ऐसा करते हैं,

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

फिर आपको उनके सटीक नामों का उपयोग करके इन निर्यातों को आयात करना होगा। तो इन घटकों को किसी अन्य फ़ाइल में उपयोग करने के लिए आपको करना होगा;

import {Template, AnotherTemplate} from './components/templates'

वैकल्पिक रूप से यदि आप निर्यात को defaultइस तरह निर्यात करते हैं,

export default class Template {}

फिर एक अन्य फ़ाइल में आप {}इस तरह का उपयोग किए बिना डिफ़ॉल्ट निर्यात आयात करते हैं ,

import Template from './components/templates'

प्रति फ़ाइल केवल एक डिफ़ॉल्ट निर्यात हो सकता है। प्रतिक्रिया में यह एक घटक को एक फ़ाइल से निर्यात करने के लिए एक सम्मेलन है, और इसे निर्यात करने के लिए डिफ़ॉल्ट निर्यात के रूप में है।

आयात करते समय आप डिफ़ॉल्ट निर्यात का नाम बदलने के लिए स्वतंत्र हैं,

import TheTemplate from './components/templates'

और आप एक ही समय में डिफ़ॉल्ट और नामित निर्यात आयात कर सकते हैं,

import Template,{AnotherTemplate} from './components/templates'

Comments

ठीक है। लेकिन ऐसा लगता है कि अभी तक एक और मनमाने ढंग से निर्णय लिया गया है कि मैं इसके लिए तर्क नहीं देखता हूं लेकिन याद रखना होगा। क्या मुझे कुछ अच्छा कारण याद आ रहा है? कई परियोजना में दर्जनों रिएक्ट घटक होंगे। हर एक की अपनी फाइल होने के बावजूद, चाहे वह कितनी भी छोटी क्यों न हो, थोड़ा गुदा हुआ है। यह विशेष रूप से दर्दनाक हो जाता है अगर उनमें से कई सहायक कार्यों के क्लैंप को साझा करते हैं। यह सामान की अधिक लाइनों को सिंक में रखने के लिए बनाता है जो थोड़ा सा अच्छा लगता है। मैं क्या खो रहा हूँ?

धन्यवाद। मुझे लगता है कि आप इसका उत्तर पूरी तरह से समझाते हैं import React, {Component} from 'react';:।

— कियान चेन

अच्छा उत्तर। मेरे पास इसे जोड़ने के लिए कुछ है: आयात विवरणों को इस तरह से उपयोग करने का प्रयास करें: import RaisedButton from 'material-ui/RaisedButton'; इसके बजाय import {RaisedButton} from 'material-ui'; यह आपकी निर्माण प्रक्रिया को तेज करेगा और आपका निर्माण आउटपुट छोटा होगा।

— शेखर कुमार

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— xgqfrms

@ShekharKumar क्या आपके पास इससे import Binding from 'module/Binding'अधिक कुशल होने का स्रोत है import {Binding} from 'module'?

— जीवन ताखर

Answer 2

आयात और निर्यात करते समय {} जोड़ें: export { ... };| import { ... } from './Template';

निर्यात →import { ... } from './Template'

निर्यात डिफ़ॉल्ट →import ... from './Template'

---

यहाँ एक काम कर उदाहरण है:

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };

---

// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

CWorking सैंडबॉक्स चारों ओर खेलने के लिए: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark