如何在我的 Stimulus JS 控制器中声明一个 const 字符串？答案

【问题标题】：How can I declare a const string in my Stimulus JS controller?如何在我的 Stimulus JS 控制器中声明一个 const 字符串？
【发布时间】：2020-10-18 05:34:36
【问题描述】：

我想为我的控制器的 CSS 选择器设置一个 const 变量，而不是在整个控制器中对其进行硬编码。我已将声明放在控制器的 initialize() 中，但出现未声明变量的错误。这样做的正确方法是什么？

当前尝试

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]

  initialize() {
    const seasonInputSelector = "input[id$='_season']"
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll(seasonInputSelector)
    // ...
  }

}

错误： ReferenceError：未定义 seasonInputSelector

【问题讨论】：

您在initialize 方法中将seasonInputSelector 声明为local。它在initialize 之外不存在。您需要将其移动为静态类级别字段（因为您的类是匿名的，所以您不能这样做）或模块范围内的 const。

标签： javascript stimulusjs

【解决方案1】：

在模块的根范围内使用const 变量：

import { Controller } from "stimulus"

const seasonInputSelector = "input[id$='_season']";

export default class extends Controller {
  static targets = ["form"]

  initialize() {
  }

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll( seasonInputSelector );
    // ...
  }

}

【讨论】：

【解决方案2】：

另一种方法是将其范围限定在您的类中

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["form"]
  seasonInputSelector = "input[id$='_season']";

  change(event) {
    // ...
    var yearNodes = this.formTarget.querySelectorAll( this.seasonInputSelector );
    // ...
  }
}

【讨论】：

JavaScript/TypeScript 不允许在类中使用 static 字段，因此这会将 seasonInputSelector 添加为 JavaScript 原型/实例属性，因此它将在 每个实例中 - 在这种情况下你可能没问题，但如果你要创建这个类的许多实例，那么它应该在class 定义之后立即声明为类级别：请参阅@zagoa 的答案：@987654321 @
基本上，在行之后 class Controller的右大括号}，放入Controller.seasonInputSelector = "input[id$='_season']";并将this.seasonInputSelector更改为Controller.seasonInputSelector