html - 将函数传递给模板组件

Question

是否可以将函数传递给 stencilJs组件？

类似于:

@Prop() okFunc: () => void;

我有一个模式，想在 Ok 上动态调用传递的函数单击模式页脚中的按钮，如 onClick在普通的 HTML 按钮上。

Answer 1

是的，你可以。这只是一个普通的 @Prop()声明并在 TSX 中表现出色。然而……

如另一个答案和评论中所述，如果您在纯 HTML 中使用 Stencil 组件，您将无法使用 Stencil 的 attribute-prop 绑定(bind)将函数(或任何非标量值)传递给通过 HTML 属性支持。

使用 DOM API

这意味着如果您想附加事件或将函数 Prop 传递给 Stencil 组件，您必须与 DOM 交互。一旦您的组件进入 DOM，与任何其他自定义元素相比，它真的没有什么特别之处。

如果没有 JSX 或其他模板 DSL(例如 Angular)，您将需要附加事件并使用 JavaScript DOM API 设置函数或对象引用 Prop :

const componentInstance = document.querySelector('my-stencil-component')

// This works and will trigger a rerender (as expected for a prop change)
componentInstance.someFunc = (...) => { ... }

// This works for any event, including custom events fired from Stencil's EventEmitter
componentInstance.addEventListener('myCustomEvent', (event: MyCustomEvent) => { ... })

如果您出于某种原因绝对必须在您的 HTML 文档中这样做:

<my-stencil-component ... >...</my-stencil-component>
<script>
  var componentInstance = document.currentScript.previousElementSibling
  componentInstance.someFunc = function(...) { ... }
</script>

---

为什么我必须这样做？

重要的是要意识到 Properties ≠ Attributes . Prop 是JavaScript Properties ，在本例中，表示元素的 DOM 对象的属性。 Attributes是 XML 属性，尽管 HTML 属性具有一些独特的特征并且行为与典型的 XML 略有不同。

Stencil 会在可能的情况下自动为您将 HTML 属性“绑定(bind)”到属性 - 特别是对于标量值( boolean 、 number 、 string )。对象引用和函数不能用作属性的值。从技术上讲，只有 string s 可以是属性值，但 Stencil 足够聪明，可以将 string 转换为当您指定 boolean 的类型时，其他标量类型( number 或 @Prop()) .

---

其他解决方案

我为我的团队开发了一个解决方案，使用 MutationObserver 将包含 JSON 的属性绑定(bind)到 Stencil 属性.它基本上是在监视一个特殊属性 bind-json , 然后映射以 json- 开头的属性到相应的驼峰式 DOM 属性上。用法如下所示:

<my-stencil-component
  bind-json
  json-prop-name='{ "key": "value" }'>
</my-stencil-component>

随着 MutationObserver在适当的位置，这与:

const componentInstance = document.querySelector('my-stencil-component')
componentInstance.propName = JSON.parse(componentInstance.getAttribute('json-prop-name'))

但是，在纯 HTML 中绑定(bind)函数确实没有令人满意的解决方案。如果没有像 eval 这样的丑陋黑客，这真的无法完成。在另一条评论中描述。这不仅会污染组件的 API，还会对 all kinds of other reasons I won't get into here 造成问题。并且它的使用将使您的应用程序在几乎任何现代安全检查中自动失败。

在我们的 Storybook 故事中，我们将回调函数定义绑定(bind)到 window ，并使用 <script>标签和 document.currentScript或 querySelector将函数 Prop 和事件绑定(bind)传递给组件实例:

const MyStory = ({ ... }) => {
  window.myStoryFunc = () => { ... }
  window.myStoryClickHandler = () => { ... }
  return `
    <my-stencil-component ... >...</my-stencil-component>
    <script>
      const componentInstance = document.currentScript.previousElementSibling
      componentInstance.someFunc = window.myStoryFunc
      componentInstance.addEventListener('click', window.myStoryClickHandler)
    </script>
  `
}