Jak nazwać klasę es6 (dla komponentów React)

Question

To jest część pytania ES6 Pytanie odpowiedzi. Próbuję użyć namespaced components w React z klasami ES6 i Babel. Więc myślę, że prawdziwe pytanie brzmi jak nazwa klasy ES6 przestrzeń więc mogę robić to, co jest wyjaśnione tutaj: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

Ponieważ otrzymuję nieoczekiwane tokena błąd:

class Headline extends Component { ... } 

class Headline.Primary extends Component { ... 
      ^

Answer 1

To naprawdę nie zmienia się z ES6, nadal będzie musiał wykonać zadanie:

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

Jednak , używając klas takich jak Headline, ponieważ przestrzenie nazw stają się dość przestarzałe w przypadku ES6 (i tak jak poprzednio były wątpliwą praktyką), powinieneś zamiast tego wykorzystać nowy system modułów. Wyeksportuj Primary jako nazwany eksport i zamiast importować klasę Headline, należy wykonać raczej import * as headlines from ….

Answer 2

Składnia ECMAScript-6 class declaration oczekuje standardowy BindingIdentifer jako nazwa klasy. Kropka nie jest poprawnym znakiem w nazwie identyfikatora.

W kontekście używanym w łączu w OP "przestrzeń nazw" jest obiektem, a właściwości są dodawane do tego obiektu, jeden po drugim, przy użyciu zapisu punktowego dla dostępu do właściwości.

Można replikować, że za pomocą ekspresji klasy zamiast:

'use strict' 
 

 
var ns = {} 
 

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

 
new ns.MyClass()

Answer 3

Ten link również odnosi się do tego pytania.

w module obiektów sekcji opisano, że można zrobić coś takiego:

// 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(); 

To nie jest dokładnie to, co staramy się robić, ale jest alternatywa.

Innym sposobem robi to jest prawie jak @Bergi wskazał już, ale ja po prostu wyjaśnienia go dalej:

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();