javascript - Kotlinx-html ref 事件

Question

我注意到代码库中有以下函数，它使用 kotlinx html ，而且很难完全理解:

private fun <E : HTMLElement> Tag.xrefImpl(prop: KMutableProperty0<E?>) = 
    this.consumer.onTagEvent(this, "ref", { prop.set(it.asDynamic()) })

据我通过谷歌搜索了解到，asDynamic 是一种 kotlin-js 方法，它只是抑制类型检查。好的，但其余部分仍不清楚。 The documentation并没有非常详细地了解其内部结构，即consumer、ref和onTagEvent。最重要的是，为什么参数类型是 KMutableProperty0？

Answer 1

这段小代码涉及 kotlin 习惯用法和高级功能，因此最好逐步检查它。

• 首先，xRefImpl 是 Tag 的扩展函数，因此拥有 Tag 实例，您将能够调用这个新方法。
• 其次，ref实际上是一个react属性，它允许获取对组件的引用。这是来自 react documentation 的示例.

使用示例:

<input type="text"
       ref={(input) => { this.textInput = input; }} />

按照约定，ref 接受一个由引擎调用的函数，并引用作为参数传递的组件。上面的代码使用以下 lambda 在 this 标记上创建一个 ref(记住 xrefImpl 是一个扩展函数):prop.set(it .asDynamic()).

• 接下来，prop 是一个静态类型的 kotlin 属性(这就是 KMutableProperty0 的含义)。它具有 get 和 set 方法，在本例中，它被分配了 it 引用。由于 it 来自 javascript，其类型未知，因此 dynamic cast .

• consumer.onTagEvent() 只是 kotlix-html 绑定(bind) javascript 属性和事件的内部方法。

例如，此框架中处理“onmouseleave”的方式如下:

consumer.onTagEvent(this, "onmouseleave") {
  console.log(it)
}

如果你去掉所有 kotlin 和 React 习惯用法，代码 this.consumer.onTagEvent(this, "ref", { prop.set(it.asDynamic()) }) 只是简单地执行 prop = this.getComponent()。因此，该方法的目的是获取组件引用。

最后，由于参数是 KMutableProperty0，它允许将组件绑定(bind)到字段，如下所示。

xrefImpl(this::component)