Kotlinx-html参考事件

Question

我注意到代码库中的以下函数，它使用kotlinx html，很难完全理解：

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

据我从googling中了解到，asDynamic是一个kotlin-js方法，它简单地抑制了类型检查。好吧，但其余的还不清楚。文献资料对其内部结构不太详细，即consumer、ref和onTagEvent。最重要的是，为什么参数类型是KMutableProperty0

Answer 1

这一小部分代码使用kotlin成语和高级特性相当密集，所以最好一步一步地检查它。

• 首先，xRefImpl是Tag的扩展函数，因此有了Tag实例，就可以调用这个新方法。
• 第二，ref实际上是react属性，它允许获取对组件的引用。下面是来自反应文件的一个例子。

示例用法：

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

通过约定，ref接受引擎将调用的函数，并引用作为参数传递的组件。上面的代码使用以下lambda创建了一个ref on this标记(请记住，xrefImpl是一个扩展函数)：prop.set(it.asDynamic())。

• 接下来，prop是一个静态类型的kotlin属性(这是KMutableProperty0的意思)。它有get和set方法，在本例中它是用it引用分配的。因为it来自javascript，所以它的类型未知，因此是动态铸造。
• consumer.onTagEvent()只是绑定javascript属性和事件的kotlix内部方式。

例如，在这个框架中处理'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)