8、前端开发中的 Stimulus 与 React 应用指南

前端开发中的 Stimulus 与 React 应用指南

1. 通用 Stimulus 控制器

将数据放入标记中能让我们拥有通用、可复用的 Stimulus 控制器。就像 Turbo 无需编写大量自定义 JavaScript 就能添加很多功能一样，编写通用 Stimulus 控制器也能在不添加大量自定义 JavaScript 的情况下增加功能。

当前有一个控制器，它通过显示或隐藏目标元素并更改目标文本以响应点击事件。我们进一步抽象来看，这里有两个独立的点击响应动作：一个是添加和移除 CSS 类，另一个是更改按钮文本。我们将把它们拆分为两个独立的控制器，以此展示 Stimulus 如何实现小而通用的动作组合。不过，这样做的明显缺点是代码和 HTML 会变得更冗长。

以下是文本控制器的代码：

import { Controller } from "@hotwired/stimulus"
export default class TextController extends Controller {
  static targets = ["elementWithText"]
  elementWithTextTarget: HTMLElement
  static values = {
    status: Boolean,
    on: { type: String, default: "On" },
    off: { type: String, default: "Off" },
  }
  offValue: string
  onValue: string
  statusVal