web-dev-qa-db-fra.com

Comment nommer des classes es6 es (pour React composants)

Cela fait partie de la question ES6 React question. J'essaie d'utiliser composants à espace de noms in React avec les classes ES6 et Babel). Donc je suppose que la vraie question est de savoir comment nommer les classes d'espace es6 afin que je puisse faire ce qui est expliqué ici: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced- composants

Depuis que j'obtiens une erreur de jeton inattendue:

class Headline extends Component { ... }

class Headline.Primary extends Component { ...
              ^
javascriptreactjsecmascript-6
25
Ben

Cela ne change pas vraiment avec ES6, vous devrez toujours faire une tâche:

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

Cependant, l'utilisation de classes comme Headline comme espaces de noms devient plutôt obsolète avec ES6 (et était auparavant une pratique discutable de toute façon), vous devriez plutôt tirer parti du nouveau système de modules. Exportez Primary en tant qu'exportation nommée et au lieu d'importer la classe Headline, faites plutôt import * as headlines from ….

21
Bergi

La syntaxe déclaration de classe ECMAScript-6 attend un standard BindingIdentifer comme nom de classe. Un point n'est pas un caractère valide dans un nom d'identifiant.

Dans le contexte utilisé dans le lien dans OP, l '"espace de noms" est un objet et les propriétés sont ajoutées à cet objet un par un en utilisant la notation par points pour l'accès aux propriétés.

Vous pouvez reproduire cela en utilisant à la place une expression de classe:

'use strict'

var ns = {}

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

new ns.MyClass()
26
Amit

Ce lien se rapporte également à cette question.

Dans la section Objets module , il est décrit que vous pouvez faire quelque chose comme ceci:

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

Ce n'est pas exactement ce que vous essayez de faire, mais c'est une alternative.

Une autre façon de le faire est presque comme @Bergi l'a déjà souligné, mais je le clarifie davantage:

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();
10
Henrique Barcelos