ウィジェットでDOM要素をvirtual-domに変換する

開発
1

現在、カスタムKaTeXレンダリングの結果であるDOM要素があります。

これは次のように生成されます。

var dom_element = document.createElement("p")
dom_element.innerHTML = "latexを含むテキスト"
renderMathInElement(dom_element)

この時点で、dom_elementにはレンダリングしたいHTMLが含まれています。そして、次のように返します。

html() {
 return h(some other component ...... , h("div", dom_element))
}

hはVNodeを期待するため、エラーが発生します。内部HTMLを渡そうとします。

html() {
 return h(some other component ...... , h("div", dom_element.innerHTML))
}

これは、dom_element.innerHTML内のタグをHTMLとしてではなく、プレーンテキストとしてレンダリングします。

これに対する解決策はありますか？

2

ウィジェットは、この目的に対してほぼ間違いなく適切なツールではありません。

ウィジェットは、args を介して明示的に渡された情報以外の情報にアクセスすべきではなく、自身内部で何が起こっているかにのみ関心を持ち、せいぜいアクションを上に送り返すことだけをすべきです。ウィジェットが他の場所の DOM に関与すべきではありません。

コンポーネントを使用する方が良いでしょう。

数式を含む LaTeX を処理し、それをコンポーネントでレンダリングできる HTML として返す JavaScript 関数を見つけることができない理由がありますか？ フレームワーク外の DOM 操作を完全に回避できるのであれば、それが最善の選択肢となるでしょう。

3

ユースケースは以下の通りです。

タグバナーコンポーネントを使用しており、そのソースを編集していました。基本的に、私のウェブサイトのタグの説明の一部にはLaTeXが含まれています。そして、それをバナーで適切にレンダリングしたいのです。

ウィジェットを編集する代わりに、「テーマのカスタマイズ」の「Head」セクションにスクリプトを追加したかったのですが、ウィジェットがすでに読み込まれているかどうかを知る方法が見つかりませんでした。そのため、「Head」セクションで document.getElementById を実行すると、タグの説明を表示する関連HTMLコンポーネントがまだ読み込まれていないため、空の要素が取得されます。

4

ウィジェットやコンポーネントがいつロードされるかを保証することはできません。しかし、didInsertElement のようなコンポーネントイベントで作業を行うことができます。