क्यों `एक्सपोर्ट डिफॉल्ट कॉन्स्टेबल` अमान्य है?

Question

मैं देखता हूं कि निम्नलिखित ठीक है:

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;

हालाँकि, यह गलत है:

export default const Tab = connect( mapState, mapDispatch )( Tabs );

फिर भी यह ठीक है:

export default Tab = connect( mapState, mapDispatch )( Tabs );

क्या यह समझाया जा सकता है कि कृपया constअमान्य क्यों है export default? क्या यह एक अनावश्यक जोड़-घटाव है और कुछ भी घोषित किया गया export defaultहै const?

Comments

esdiscuss.org/topic/…

— Bergi

export default Tab = connect( mapState, mapDispatch )( Tabs );होना चाहिए export default connect( mapState, mapDispatch )( Tabs );। आप फ़ंक्शन कॉल का परिणाम निर्यात कर रहे हैं, न कि चर टैब।

— थेजे

निर्यात मॉड्यूल में एक const या let की आवश्यकता होती है (और प्रासंगिक) लेकिन आयात मॉड्यूल में अप्रासंगिक, जहां आयातित पहचानकर्ता हमेशा केवल पढ़ने के लिए (असाइन नहीं किया जा सकता है)। यह अभी भी स्पष्ट नहीं करता है कि "निर्यात डिफ़ॉल्ट" का सिंटैक्स गैर-डिफ़ॉल्ट "निर्यात" से अलग क्यों है।

— डेनिस होवे

Answer 1

constऐसा है let, यह एक लेसिकल डिक्लेरेशन ( वैरिएबलस्टेमेंट , डिक्लेरेशन ) है जिसका उपयोग आपके ब्लॉक में एक पहचानकर्ता को परिभाषित करने के लिए किया जाता है।

आप इसे defaultकीवर्ड के साथ मिलाने का प्रयास कर रहे हैं , जो इसे पालन करने के लिए एक HoistableDeclaration, ClassDeclaration या AssignmentExpression की अपेक्षा करता है।

इसलिए यह एक SyntaxError है ।

---

यदि आप constकुछ ऐसा करना चाहते हैं, तो आपको पहचानकर्ता प्रदान करने और उपयोग करने की आवश्यकता नहीं है default।

exportअपने आप में एक VariableStatement या घोषणा को इसके अधिकार में स्वीकार करता है ।

---

AFAIK अपने आप में निर्यात आपके वर्तमान दायरे में कुछ भी नहीं जोड़ना चाहिए।

---

निम्नलिखित ठीक हैexport default Tab;

Tabयह नाम डिफ़ॉल्ट दिया जाता है के रूप में एक AssignmentExpression बन जाता है ^?

export default Tab = connect( mapState, mapDispatch )( Tabs ); ठीक है

यहाँ Tab = connect( mapState, mapDispatch )( Tabs );एक AssignmentExpression है ।

Comments

इसका उत्तर यह है कि यह एक त्रुटि कैसे है। सवाल अभी भी है क्यों? इसका एक कारण इस तरह से कॉन्स्ट के दुरुपयोग को रोकता है: डिफॉल्ट कॉन्स्ट ए = 1, बी = 3, सी = 4;

— सर्गेई

"AFAIK the export in itself should not add anything to your current scope"यह इतना सटीक नहीं है, क्योंकि export const a = 1यह aआपके वर्तमान संदर्भ में जोड़ता है। और export defaultकक्षाओं के मामले में भी , क्योंकि आपके वर्तमान संदर्भ में भी export default class MyClass {}जोड़ता MyClassहै।

— अर्नेस्टो

@SergeyOrlov सहमत है कि यह बताता है कि यह एक त्रुटि कैसे उत्पन्न करता है, लेकिन यह आवश्यक होने के कारण थोड़ा प्रकाश डालता है। हालांकि मुझे यकीन नहीं है कि यह एकमात्र कारण है, आपको संभवतः एक अलग उत्तर के रूप में पोस्ट करना चाहिए, इस पर टिप्पणी नहीं।

— हरिक

यदि मैं निम्नलिखित कार्य करता हूं: let a; export default a;और फिर चर को अपडेट करें जब यह पहले से ही किसी अन्य मॉड्यूल में आयात किया गया है, तो निर्यात डिफ़ॉल्ट चर अपडेट क्यों नहीं करता है?

— के - एसओ में विषाक्तता बढ़ रही है।

मेरी समझ, संक्षेप में, आप लिख सकते हैं const foo = function bar() {}और यह भी const Foo = class Bar {}, लेकिन नहीं const foo = const bar = 1। उसी के लिए export default, यह जैसा है const foo =।

— zetavg

Answer 2

आप भी ऐसा कुछ कर सकते हैं, यदि आप इसके बजाय डिफ़ॉल्ट रूप से एक कॉन्स्ट / लेट निर्यात करना चाहते हैं

const MyComponent = ({ attr1, attr2 }) => (<p>Now Export On other Line</p>);
export default MyComponent

आप ऐसा कुछ कर सकते हैं, जो मुझे व्यक्तिगत रूप से पसंद नहीं है।

let MyComponent;
export default MyComponent = ({ }) => (<p>Now Export On SameLine</p>);

Answer 3

यदि घटक का नाम फ़ाइल नाम में समझाया गया है MyComponent.js, तो बस घटक का नाम न रखें, कोड को पतला रखता है।

import React from 'react'

export default (props) =>
    <div id='static-page-template'>
        {props.children}
    </div>

अद्यतन : चूंकि यह स्टैक ट्रेसिंग में अज्ञात के रूप में लेबल करता है, इसलिए इसे अनुशंसित नहीं किया जाता है

Comments

क्या आपके पास स्टैकट्रैक के मुद्दे नहीं थे? मेरे लिए यह Unknownहर जगह प्रदर्शित होने का कारण है जहां अनाम डिफ़ॉल्ट निर्यात है

— जुआरश

हालांकि, यह काम करता है, इसमें कोई संदेह नहीं है कि खिलौना अनुप्रयोग विकास के बाहर हर प्रतिक्रिया डेवलपर को हर कीमत पर बचने का प्रयास करना चाहिए ।

— ली एक्स

@ लिक्स मैं समझ नहीं पा रहा था कि किसी को इस सिंटैक्स का उपयोग करने से क्यों बचना चाहिए। क्या आप कृपया एक लिंक की व्याख्या या साझा करेंगे? धन्यवाद।

— सुडिप

@sudip किसी भी नाम के साथ एक घटक बनाना प्रतिक्रिया घटक मॉडल और प्रतिपादन के लिए अच्छा नहीं है।

— ली एक्स

हालाँकि, स्वच्छ दिखता है, दान अब्रामोव भी सुझाव देता है कि हमें घटक घोषणा में उचित फ़ंक्शन / कॉन्स्टेंस नामों का उपयोग करना चाहिए: twitter.com/dan_abramov/status/1255229440860262400 ;) "- स्टैक के निशान में अज्ञात के रूप में दिखाई देगा - देवतुलस में अज्ञात रूप में दिखाई देगा; - रिएक्ट-विशिष्ट लिंट नियमों द्वारा जांच नहीं की जाएगी - फास्ट रीफ्रेश जैसी कुछ सुविधाओं के साथ काम नहीं करेगा "

— ज़ोल्टन

Answer 4

पॉल का जवाब वही है जिसकी आपको तलाश है। हालाँकि, एक व्यावहारिक बात के रूप में, मुझे लगता है कि आप उस पैटर्न में दिलचस्पी ले सकते हैं जो मैं अपने स्वयं के रिएक्ट + Redux ऐप्स में उपयोग कर रहा हूं।

यहां मेरे एक मार्ग से एक छीन लिया गया उदाहरण है, जिसमें दिखाया गया है कि आप अपने घटक को कैसे परिभाषित कर सकते हैं और इसे एक ही कथन के साथ डिफ़ॉल्ट रूप से निर्यात कर सकते हैं:

import React from 'react';
import { connect } from 'react-redux';

@connect((state, props) => ({
    appVersion: state.appVersion
    // other scene props, calculated from app state & route props
}))
export default class SceneName extends React.Component { /* ... */ }

(नोट: मैं किसी भी मार्ग के शीर्ष-स्तरीय घटक के लिए "दृश्य" शब्द का उपयोग करता हूं)।

मुझे आशा है कि यह मददगार है। मुझे लगता है कि यह पारंपरिक की तुलना में बहुत साफ-सुथरा हैconnect( mapState, mapDispatch )( BareComponent )

Comments

बहुत खराब डेकोरेटर एक फंक्शन कंपोनेंट पर इस्तेमाल नहीं किए जा सकते हैं

— एरिक किम

@EricKim बुमर। लेकिन, यह ध्यान में रखने योग्य है कि डेकोरेटर कल्पना अभी तक अंतिम नहीं है। हो सकता है कि कार्यात्मक घटकों को "विरासत" डेकोरेटर का उपयोग करके सजाया नहीं जा सकता है, लेकिन मुझे नहीं पता कि यह विरासत डिजाइन की सीमा के कारण है, या क्योंकि विरासत सज्जाकारों का कार्यान्वयन अधूरा या छोटी गाड़ी है। एफडब्ल्यूआईडब्ल्यू: @connectकेवल एकमात्र डेकोरेटर है जिसका मैं उपयोग करता हूं, मैं केवल उन घटकों के साथ इसका उपयोग करता हूं जो एक Redux स्टोर से जुड़े होते हैं, उनमें से लगभग हर एक "मार्ग" है और लगभग हर मार्ग में राज्य होना चाहिए (और इसलिए एक शुद्ध कार्य नहीं हो सकता) ।

— टॉम

Answer 5

पॉल द्वारा साझा किया गया उत्तर सबसे अच्छा है। अधिक विस्तार करने के लिए,

प्रति फ़ाइल केवल एक डिफ़ॉल्ट निर्यात हो सकता है। जबकि एक से अधिक कब्जे वाले निर्यात हो सकते हैं। डिफ़ॉल्ट चर को किसी भी नाम से आयात किया जा सकता है, जबकि कॉन्स्ट चर को विशेष नाम से आयात किया जा सकता है।

var message2 = 'मुझे निर्यात किया गया है';

डिफ़ॉल्ट संदेश निर्यात करें 2;

निर्यात कास्ट संदेश = 'मैं भी निर्यात किया जाता हूं'

आयात पक्ष में हमें इसे इस तरह आयात करना होगा:

'{./est' से आयात {संदेश};

या

'./test' से आयात संदेश;

पहले आयात के साथ, कास्ट चर आयात किया जाता है, जबकि दूसरे के साथ, डिफ़ॉल्ट एक आयात किया जाएगा।

Answer 6

default मूल रूप से है const someVariableName

आपको नामांकित पहचानकर्ता की आवश्यकता नहीं है क्योंकि यह फ़ाइल के लिए डिफ़ॉल्ट निर्यात है और जब आप इसे आयात करते हैं, तो आप इसे नाम दे सकते हैं, इसलिए defaultआप केवल एक कीवर्ड में चर असाइनमेंट को संघनित कर रहे हैं।

Answer 7

मेरे लिए यह टाइपस्क्रिप्ट के कई आइडिओसिंक्रेसिस (आईडीओ (टी) पर जोर देने वाला) में से एक है जो लोगों को अपने बालों को बाहर निकालने और डेवलपर्स को शाप देने का कारण बनता है। शायद वे अधिक समझने योग्य त्रुटि संदेशों के साथ आने पर काम कर सकते थे।