Kotlinx-HTML refのイベント

Question

私はkotlinx htmlを使用するコードベースで以下の機能を気づいた、それは完全に理解することはかなり難しいです：

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

私の知る限りは、グーグルから分かるように、asDynamicがありますkotlin-jsメソッドを使用して、型チェックを単純に抑制します。 OK、それ以外の部分はまだ不明です。 The documentationは内部についてはそれほど詳細ではありません。つまり、consumer,ref、onTagEventです。さらに、パラメータタイプがKMutableProperty0の理由は？

Answer 1

この小さなコードは、kotlinのイディオムと高度な機能を備えているため、段階的に検討することをお勧めします。

• まず、xRefImplはTagの拡張機能なので、Tagインスタンスを持つ、あなたは、この新しいメソッドを呼び出すことができるでしょう。
• 第2に、refは実際には反応特性であり、これは成分への参照を得ることを可能にする。ここにはreact documentationの例があります。

使用例：契約で

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

、refは、引数として渡されたコンポーネントを参照して、エンジンによって呼び出される関数を受け付けます。上記のコードは、thisタグ（xrefImpl拡張機能を覚えておいてください）にrefを次のラムダ：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)