Kotlinx-html ref事件

我已经注意到在使用kotlinx html的代码库中的以下功能,而且很难完全理解:

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

据我所知,从google的asDynamicasDynamic是一种kotlin-js方法,它简单地抑制了类型检查。 好的,但其余的还不清楚。 这个文档并不是很详细的介绍它的内部,即consumerrefonTagEvent 。 最重要的是,为什么参数类型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意思)。 它有getset方法,在这种情况下,它被分配给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)