如何命名es6类(对于React组件)

Question

这是部分ES6问题部分反应问题.我正在尝试在React中使用带有ES6类和Babel的命名空间组件.所以我想真正的问题是如何命名空间es6类,所以我可以做这里解释的内容:https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

由于我收到意外的令牌错误:

class Headline extends Component { ... }

class Headline.Primary extends Component { ...
              ^

Answer 1

在ECMAScript的6类声明的语法需要一个标准BindingIdentifer作为类名.点不是标识符名称中的有效字符.

在OP中的链接中使用的上下文中,"名称空间"是一个对象,并且使用点表示法逐个地将属性添加到该对象以进行属性访问.

您可以通过使用类表达式来复制它:

'use strict'

var ns = {}

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

new ns.MyClass()

Answer 2

这并没有真正改变ES6,你仍然需要做一个任务:

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

但是,使用类似Headline命名空间的类在ES6中已经相当不赞同(以前一直是一个值得怀疑的实践),你应该改用新的模块系统.导出Primary为命名导出,而不是导入Headline类而不是导入import * as headlines from ….

Answer 3

此链接也与此问题有关.

在Module objects部分中,描述了您可以执行以下操作:

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