我在代码库中注意到以下功能,该功能使用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
? 最佳答案
这小段代码包含Kotlin惯用法和高级功能,因此最好逐步检查它。
首先,xRefImpl
是Tag
的扩展功能,因此拥有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
的意思)。它具有get
和set
方法,在这种情况下,它使用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)