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

IT技术 javascript reactjs ecmascript-6
2021-02-19 23:31:56

这是部分 ES6 问题部分 React 问题。我正在尝试将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 { ...
              ^
3个回答

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

在 OP 中的链接中使用的上下文中,“命名空间”是一个对象,并且使用用于属性访问的点表示法将属性逐一添加到该对象中。

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

'use strict'

var ns = {}

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

new ns.MyClass()

@faintsignal 这也是我的猜测。可能是自那以后修复的一些错误。它今天有效,并且规范似乎也允许这样做。
2021-04-29 23:31:56
这种带有匿名类的方法在与extends. :(
2021-05-01 23:31:56
Yeees,yeeeesss,这就是我要找的!不知道你可以这样写something.something = class extends something.baseSomething{}
2021-05-06 23:31:56
@faintsignal 真的吗?它应该可以正常工作,因为类表达式中的名称是可选的。
2021-05-07 23:31:56
@caw 我真的希望我在发表评论时花点时间详细说明和/或包括一个小提琴,因为我不记得具体细节。也许自从我发表评论以来,引擎已经解决了一些问题。
2021-05-08 23:31:56

这在 ES6 中并没有真正改变,你仍然需要做一个赋值:

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

然而,Headline在 ES6 中使用像命名空间这样的类已经非常不推荐了(而且以前一直是一个有问题的做法),你应该改用新的module系统。导出Primary为命名导出,而不是导入Headline类,而是 do import * as headlines from …

您可以安全地更改class Primary为 justclass并使其成为匿名类表达式。(否则,除了带前缀的名称之外,该名称Primary(不带名称空间前缀)该类中也可用。)
2021-04-22 23:31:56
@Bergi 他们做到了!在这方面,函数和 ES6 类的行为完全相同。当您说它使名称“显式”时,您指的是从 ES6 开始可以自动推断函数(和类)名称,这意味着函数(或类)表达式的名称通常是多余的。但是,函数(或类)表达式的名称可能分配给它的变量或属性不同,在这种情况下,表达式的名称将该表达式的范围内额外可用
2021-04-27 23:31:56
@caw 哦,你说得对!我不知道classScope,谢谢。
2021-04-27 23:31:56
@caw 不,class与命名function表达式不同,命名表达式不会使标识符在其范围内可用它只是使名称显式(并且在某些情况下,需要为构造函数提供其.name属性)
2021-04-30 23:31:56

链接也与此问题有关。

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();
那就对了。我已经复制并粘贴了该行,但忘记编辑了。谢谢=]
2021-04-27 23:31:56
关于您的第二个片段,您不会* as使用默认导出,对吗?
2021-05-03 23:31:56