桥接组件

﹟ Web 组件

BridgeComponent 类是 Stimulus 控制器 的扩展。除了以下 Strada 特定的桥接功能之外，你还可以使用标准 控制器 中的所有功能

• static component：组件的唯一名称。这必须与你为相应的原生组件使用的名称相匹配。
• this.platformOptingOut：指定控制器是否使用 data-controller-optout-<platform> 属性针对当前平台选择退出。
• this.enabled：指定组件是否已启用并受当前版本的原生应用程序支持。
• this.bridgeElement：为包装在 BridgeElement 中的组件实例提供 this.element。
• this.send(event, data = {}, callback)：向原生组件发送一条消息，其中包含 event 名称、可选的 JSON data，以及当原生组件回复消息时要运行的 callback。

例如，要创建一个在原生应用程序中显示原生提交按钮的 "form" 组件，你需要向 Web <form> 添加以下控制器、目标和标题属性

<form
  method="post"
  data-controller="bridge--form">

  <!-- form elements -->

  <button
    class="button"
    type="submit"
    data-bridge--form-target="submit"
    data-bridge-title="Submit">
    Submit Form
  </button>

</form>

接下来，创建一个名为 "form" 的 BridgeComponent，它向原生组件发送一条消息，其中包含 data，该 data 包含表单的 submitTitle。在原生组件回复消息时提供一个要运行的回调。

// bridge/form_controller.js

import { BridgeComponent, BridgeElement } from "@hotwired/strada"

export default class extends BridgeComponent {
  static component = "form"
  static targets = [ "submit" ]

  submitTargetConnected(target) {
    const submitButton = new BridgeElement(target)
    const submitTitle = submitButton.title

    this.send("connect", { submitTitle }, () => {
      target.click()
    })
  }
}

注意：建议将桥接组件放在 Stimulus 控制器所在的 /bridge 子目录中，以便于识别并将其与其他 Stimulus 控制器隔离。

﹟ 原生组件

请参阅 hotwired/strada-ios 和 hotwired/strada-android 仓库中关于构建相应原生组件的文档。

下一步：元素