我在代码库中注意到以下功能,该功能使用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对其内部结构不是很详细,即consumerrefonTagEvent。最重要的是,为什么参数类型为KMutableProperty0

最佳答案

这小段代码包含Kotlin惯用法和高级功能,因此最好逐步检查它。


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


用法示例:

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


根据合同,ref接受将由引擎调用的函数,并引用作为参数传递的组件。上面的代码使用以下lambda在ref标记上创建一个this标记(记住xrefImpl扩展功能):prop.set(it.asDynamic())


接下来,prop是静态类型的kotlin属性(这是KMutableProperty0的意思)。它具有getset方法,在这种情况下,它使用it引用分配。由于it来自javascript,因此其类型未知,因此为dynamic cast
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)

09-25 18:53
查看更多