如何在我的 React 组件类中拥有类范围的常量？

Question

通常我会这样做：

var tagSymbols = Object.freeze([
  '!',
  '+',
  '@'
]);

但后来我知道有来自 Babel (?) 的 const。

const tagSymbols = Object.freeze([
  '!',
  '+',
  '@'
]);

两者都返回相同的错误：

Syntax error: Unexpected token (4:6)

  2 | 
  3 | class GeneralToDoListInput extends Component {
> 4 |   var tagSymbols = Object.freeze([
    |       ^
  5 |     '!',
  6 |     '+',
  7 |     '@'

Syntax error: Unexpected token (5:8)

  3 | class GeneralToDoListInput extends Component {
  4 | 
> 5 |   const tagSymbols = Object.freeze([
    |         ^
  6 |     '!',
  7 |     '+',
  8 |     '@'

Answer 1

您不能将变量声明放在类体内。这只是语言所不允许的。在 ES6 中，类声明的结构基本上是

class Foo() {
  method1() {}
  method2() {}
  ...
}

最简单的解决方案是将变量声明放在类之外：

const tagSymbols = ...:
class GeneralToDoListInput extends Component {
  ...
}

类/模块中的任何代码都可以访问tagSymbols。

如果它真的必须是一个类属性，你可以定义一个静态 getter：

class GeneralToDoListInput extends Component {
  static get tagSymbols() {
    return Object.freeze(...);
  }
}

或者在声明之后赋值给类：

class GeneralToDoListInput extends Component {
  ...
}
GeneralToDoListInput.tagSymbols = ...;