Javascript 如何命名 es6 类（用于 React 组件）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32230966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to namespace es6 classes (for React components)
提问by Ben
This is part ES6 question part React question. I'm trying to use namespaced componentsin 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
这是部分 ES6 问题部分 React 问题。我正在尝试在带有 ES6 类和 Babel 的 React 中使用命名空间组件。所以我想真正的问题是如何命名空间 es6 类，以便我可以做这里解释的事情：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 { ...
^
采纳答案by Bergi
This doesn't really change with ES6, you still will have to do an assignment:
这在 ES6 中并没有真正改变，你仍然需要做一个赋值：
Headline.Primary = class Primary extends Component { … };
However, using classes like Headlineas namespaces is getting pretty deprecated with ES6 (and has previously been a questionable practice anyway), you should instead leverage the new module system. Export Primaryas a named export, and instead of importing the Headlineclass rather do import * as headlines from ….
然而，使用像Headline命名空间这样的类在 ES6 中已经被弃用了（而且以前一直是一个有问题的做法），你应该改用新的模块系统。导出Primary为命名导出，而不是导入Headline类，而是 do import * as headlines from …。
回答by Amit
The ECMAScript-6 class declarationsyntax expects a standard BindingIdentiferas the class name. A dot is not a valid character inside an identifier name.
在ECMAScript的6类声明的语法需要一个标准BindingIdentifer作为类名。点不是标识符名称中的有效字符。
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.
在 OP 中的链接中使用的上下文中，“命名空间”是一个对象，并且使用用于属性访问的点表示法将属性一个一个地添加到该对象中。
You could replicate that by using a class expressioninstead:
您可以通过使用类表达式来复制它：
'use strict'
var ns = {}
ns.MyClass = class {
constructor() {
console.log('in constructor')
}
}
new ns.MyClass()回答by Henrique Barcelos
This linkalso relates to this question.
此链接也与此问题有关。
In the Module objectssection, it is described that you can do something like this:
在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();
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:
另一种方法几乎就像@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();
