Kotlinx-html ref事件
我已经注意到在使用kotlinx html的代码库中的以下功能,而且很难完全理解:
private fun <E : HTMLElement> Tag.xrefImpl(prop: KMutableProperty0<E?>) = this.consumer.onTagEvent(this, "ref", { prop.set(it.asDynamic()) })
据我所知,从google的asDynamic
, asDynamic
是一种kotlin-js方法,它简单地抑制了类型检查。 好的,但其余的还不清楚。 这个文档并不是很详细的介绍它的内部,即consumer
, ref
和onTagEvent
。 最重要的是,为什么参数类型KMutableProperty0
?
这一小段代码与kotlin成语和高级功能相当激烈,所以最好逐步检查。
- 首先,
xRefImpl
是一个Tag
的扩展函数,所以有一个Tag
实例,你就可以调用这个新的方法。 - 其次,
ref
实际上是一个反应属性,它允许获得组件的引用。 这里是反应文档的一个例子。
用法示例:
<input type="text" ref={(input) => { this.textInput = input; }} />
通过契约, ref
接受一个将被引擎调用的函数,引用一个作为参数传递的组件。 上面的代码使用下面的lambda创建一个ref
标签(记住xrefImpl
扩展函数): 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)