如何在 Stimulus JS 控制器中声明 const 字符串?

dav*_*mcd 9 javascript stimulusjs

我想为我的控制器的 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)
    // ...
  }

}
Run Code Online (Sandbox Code Playgroud)

错误: ReferenceError:seasonInputSelector 未定义

Dai*_*Dai 15

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 );
    // ...
  }

}
Run Code Online (Sandbox Code Playgroud)


Adr*_*ien 7

另一种方法是将其范围限制在类中

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 );
    // ...
  }
}
Run Code Online (Sandbox Code Playgroud)

  • JavaScript/TypeScript 不允许类中使用“static”字段,因此这会将“seasonInputSelector”添加为 JavaScript 原型/实例属性,因此它将出现在**每个实例**中 - 在这种情况下,您可能没问题,但是如果您要创建此类的许多实例,那么应该在“class”定义之后立即将其声明为类级别:请参阅此处@zagoa的答案:/sf/answers/3360895261/ (2认同)
  • 基本上,在 `class Controller` 的右大括号 `}` 行上,放置 `Controller.seasonInputSelector = "input[id$='_season']";` 并将 `this.seasonInputSelector` 更改为 `Controller.seasonInputSelector` (2认同)