Come classificare le classi es6 (per i componenti React)

Questa è parte della domanda ES6. Domanda di reazione. Sto cercando di utilizzare i componenti dei nomi in React con le classi ES6 e Babel. Quindi immagino che la vera domanda sia come denominare le classi dello spazio es6 in modo da poter fare ciò che è spiegato qui: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

Poiché ricevo un errore di token imprevisto:

class Headline extends Component { ... } class Headline.Primary extends Component { ... ^ 

Questo non cambia davvero con ES6, dovrai comunque svolgere un compito:

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

Tuttavia, l’utilizzo di classi come Headline come namespace sta diventando piuttosto deprecato con ES6 (e in precedenza è stata comunque una pratica discutibile), dovresti invece sfruttare il nuovo sistema dei moduli. Esportare Primary come esportazione con nome e invece di importare la class Headline piuttosto import * as headlines from …

La syntax della dichiarazione di class ECMAScript-6 prevede un BindingIdentifer standard come nome della class. Un punto non è un carattere valido all’interno di un nome identificativo.

Nel contesto utilizzato nel collegamento in OP, lo “spazio dei nomi” è un object e le proprietà vengono aggiunte a quell’object uno per uno utilizzando la notazione a punti per l’accesso alle proprietà.

Potresti replicare usando invece un’espressione di class :

 'use strict' var ns = {} ns.MyClass = class { constructor() { console.log('in constructor') } } new ns.MyClass() 

Questo collegamento si riferisce anche a questa domanda.

Nella sezione Oggetti modulo , è descritto che puoi fare qualcosa del genere:

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

Non è esattamente quello che stai cercando di fare, ma è un’alternativa.

Un altro modo di farlo è quasi come @Bergi ha già sottolineato, ma sto solo chiarendo ulteriormente:

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

Condividerò la mia soluzione. Per prima cosa ho provato a utilizzare la soluzione @Amit e ho fatto in questo modo:

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

Tuttavia, questa soluzione ha diversi problemi quando ci sono> 100 classi e molti pacchetti in diversi progetti:

  1. L’editor JS (NetBeans 8.2) interrompe la comprensione della relazione tra le classi e definisce la giusta class dell’object. Nel codice risultato il completamento automatico smette di funzionare ed è necessario aprire la class per ottenere la sua API.
  2. È necessario controllare la variabile ns e le sue proprietà che non sono molto buone quando ci sono molti pacchetti.

Di conseguenza, utilizzo la seguente soluzione (prestare attenzione a var , const e parentesi graffe).

File ClassA.js nelle cartelle organizzazione / organizzazione / prodotto.

 { var org_organization_product_ClassA = class { .... } } 

File ClassB.js nelle cartelle organizzazione / organizzazione / prodotto.

 { const ClassA = org_organization_product_ClassA; var org_organization_product_ClassB = class { constructor() { let this._objA = new ClassA(); } } } 

Quando ho bisogno di ClassB fullname di classB, uso this.constructor. . E l’ultimo, per usare tutte le classi nella mia applicazione web, ho scritto un semplice plugin Maven che prende il codice delle classi JS, controlla la dipendenza di ogni class, ordina le classi e scrive il loro codice in un file js che uso nella pagina web.