如何命名 es6 类（用于 React 组件）

Question

This is part ES6 question part React question. I'm trying to use namespaced components in React with ES6 classes and Babel. So I guess the real question is how to name space es6 classes so I can do what is explained here: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

Since I get an unexpected token error:

class Headline extends Component { ... }

class Headline.Primary extends Component { ...
              ^

Answer 1

The ECMAScript-6 class declaration syntax expects a standard BindingIdentifer as the class name. A dot is not a valid character inside an identifier name.

In the context used in the link in OP, the "namespace" is an object, and properties are added to that object one by one using the dot notation for property access.

You could replicate that by using a class expression instead:

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

Answer 2

This doesn't really change with ES6, you still will have to do an assignment:

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

However, using classes like Headline as namespaces is getting pretty deprecated with ES6 (and has previously been a questionable practice anyway), you should instead leverage the new module system. Export Primary as a named export, and instead of importing the Headline class rather do import * as headlines from … .

Answer 3

This link also relates to this question.

In the Module objects section, it is described that you can do something like this:

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

It's not exactly what you are trying to do, but is an alternative.

Another way of doing it is almost like @Bergi has already pointed out, but I'm just clarifying it further:

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