Kotlinx-HTML参考事件

Question

我已经注意到使用Kotlinx HTML的代码库中的以下功能，很难完全理解：

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

据我了解，从谷歌搜索中，asDynamic是一种Kotlin-JS方法，它只是抑制了类型检查。好的，但其余的仍然不清楚。该文档对其内部设备的详细介绍，即consumer，ref和onTagEvent。最重要的是，为什么参数类型KMutableProperty0？

Answer 1

这个小的代码非常激烈，具有kotlin成语和高级功能，因此最好逐步检查它。

• 首先，xRefImpl是Tag的扩展功能，因此拥有Tag实例，您可以调用此新方法。
• 第二，ref实际上是一个React属性，它允许对组件进行引用。这是React文档中的一个示例。

示例用法：

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

通过合同，ref接受了引擎将调用的函数，并参考通过参数传递的组件。上面的代码在this标签上创建ref（请记住xrefImpl扩展功能），使用以下lambda：prop.set(it.asDynamic())。

• 接下来，prop是静态型的Kotlin属性（这是KMutableProperty0的含义）。它具有get和set方法，在这种情况下，它以it参考分配。由于it来自JavaScript，因此其类型未知，因此动态铸件。

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

例如，这是在此框架中处理" onmouseleave"的方式：

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

如果您剥离了所有kotlin并反应成语，则代码this.consumer.onTagEvent(this, "ref", { prop.set(it.asDynamic()) })只需使用prop = this.getComponent()。该方法的目的是获取组件参考。

最后，由于该参数为 KMutableProperty0，因此允许将组件绑定到一个字段。

xrefImpl(this::component)