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

Posted 2023-02-21

【中文标题】如何命名 es6 类（用于 React 组件）

【英文标题】：How to namespace es6 classes (for React components)

【发布时间】：2020-11-20 05:51:16

【问题描述】：

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

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

class Headline extends Component  ... 

class Headline.Primary extends Component  ...
              ^

【问题讨论】：

我认为您可能应该使用modules，因为 ES6 没有命名空间的概念。

【参考方案1】：

这个link也与这个问题有关。

在模块对象部分中，描述了您可以执行以下操作：

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

【讨论】：

关于您的第二个 sn-p，您不会使用默认导出执行 * as，对吗？

没错。我已经复制并粘贴了该行并忘记对其进行编辑。谢谢=]

【参考方案2】：

这在 ES6 中并没有真正改变，你仍然需要做一个作业：

Headline.Primary = class Primary extends Component  … ;

然而，使用像 Headline 这样的类作为命名空间在 ES6 中已被弃用（而且以前一直是一个有问题的做法），您应该改用新的模块系统。将Primary 导出为命名导出，而不是导入Headline 类，而是使用import * as headlines from …。

【讨论】：

您可以安全地将 class Primary 更改为 class 并使其成为 anonymous 类表达式。 （否则，除了前缀名称之外，该名称Primary（没有名称空间前缀）将在该类内可用。）

@caw 不，命名class 表达式不会使标识符在其范围内可用，这与命名function 表达式不同。它只是使名称显式（并且在某些情况下，有必要为构造函数提供其.name 属性）

@Bergi 他们做到了！在这方面，函数和 ES6 类的行为完全相同。当您说它使名称“显式”时，您指的是函数（和类）名称可以自 ES6 以来自动推断，这意味着函数（或类）的名称表达往往是多余的。但是，函数（或类）表达式的名称可能与分配给它的变量或属性的名称不同，在这种情况下，表达式的名称将在 within该表达式的范围另外。

@caw 哦，你是对的！我不知道classScope，谢谢。

【参考方案3】：

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

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

您可以改为使用 类表达式 来复制它：

'use strict'

var ns = 

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


new ns.MyClass()

【讨论】：

是的，是的，这就是我要找的！不知道你可以写something.something = class extends something.baseSomething

这种带有匿名类的方法在与extends 结合使用时似乎会失败。 :(

@faintsignal 真的吗？它应该可以正常工作，因为类表达式中的名称是可选的。

@caw 我真希望我在发表评论时能花点时间详细阐述和/或包括一个小提琴，因为我不记得具体细节了。自从我发表评论以来，引擎可能出现了一些问题。

@faintsignal 这也是我的猜测。可能是从那以后修复的一些错误。它在今天有效，而且规范似乎也允许这样做。