ईएस 6 कक्षाओं (प्रतिक्रिया घटकों के लिए) नाम कैसे करें

Question

यह हिस्सा ईएस 6 प्रश्न भाग प्रतिक्रिया प्रश्न है। मैं ईएस 6 कक्षाओं और बेबेल के साथ प्रतिक्रिया में namespaced components का उपयोग करने की कोशिश कर रहा हूं। तो मुझे लगता है कि असली सवाल यह है कि अंतरिक्ष ES6 कक्षाएं नाम के लिए तो मैं यहाँ क्या समझाया गया है क्या कर सकते हैं: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

जब से मैं एक अप्रत्याशित टोकन त्रुटि मिलती है:

class Headline extends Component { ... } 

class Headline.Primary extends Component { ... 
      ^

Answer 1

यह वास्तव में ES6 के साथ नहीं बदलता है, तब भी आप एक काम करना होगा:

Headline.Primary = class Primary extends Component { … }; 

हालांकि , Headline जैसी कक्षाओं का उपयोग करते हुए नामस्थानों को ES6 के साथ बहुत बहिष्कृत किया जा रहा है (और पहले भी एक संदिग्ध अभ्यास रहा है), आपको इसके बजाय नए मॉड्यूल सिस्टम का लाभ उठाना चाहिए। नामित निर्यात के रूप में Primary निर्यात करें, और Headline कक्षा आयात करने के बजाय import * as headlines from … करें।

Answer 2

ECMAScript-6 class declaration वाक्य रचना की उम्मीद एक मानक BindingIdentifer कक्षा नाम के रूप में। पहचानकर्ता नाम के अंदर एक बिंदु मान्य वर्ण नहीं है।

ओपी में लिंक में उपयोग किए गए संदर्भ में, "नेमस्पेस" एक ऑब्जेक्ट है, और प्रॉपर्टी एक्सेस के लिए डॉट नोटेशन का उपयोग करके गुणों को एक-एक करके जोड़ा जाता है।

आप को दोहराने सकता है कि बजाय एक वर्ग अभिव्यक्ति का उपयोग करके:

'use strict' 
 

 
var ns = {} 
 

 
ns.MyClass = class { 
 
    constructor() { 
 
    console.log('in constructor') 
 
    } 
 
} 
 

 
new ns.MyClass()

Answer 3

यह link भी इस प्रश्न से संबंधित है।

मॉड्यूल में अनुभाग वस्तुओं, यह वर्णन किया गया है आप कुछ इस तरह कर सकते हैं कि:

// headline.js file 
export {Headline, Primary} 
class Headline {} 
class Primary {} 

// In another module... 

import * as Headline from "headline"; 

let h = new Headline.Headline(); 
let hp = new Headline.Primary(); 

यह बिल्कुल आप क्या करने की कोशिश कर रहे हैं नहीं है, लेकिन एक विकल्प है।

यह ऐसा करने का एक और तरीका है लगभग तरह @Bergi पहले ही बताया गया है, लेकिन मैं सिर्फ यह आगे स्पष्ट कर रहा हूँ:

let Headline = class Headline extends Component { } 
Headline.Primary = class Primary extends Component { } 

export {Headline as default} 

// in another module: 
import Headline from 'headline'; 

let headline = new Headline(); 
let primary = new Headline.Primary();