Преобразование DOM-элемента в virtual-dom в виджетах

Разработка
1

У меня сейчас есть DOM-элемент, который является результатом кастомного рендеринга KaTeX.

Он создается так:

var dom_element = document.createElement("p")
dom_element.innerHTML = "some text that contain latex"
renderMathInElement(dom_element)

На этом этапе dom_element содержит HTML, который я хочу отрендерить. И я возвращаю его так:

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

Так как h ожидает VNode, это вызывает ошибку. Я пытаюсь передать innerHTML вместо этого:

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

Это рендерит теги внутри dom_element.innerHTML как обычный текст, а не как HTML.

Есть ли решение этой проблемы?

2

Виджет, скорее всего, не самый подходящий инструмент для этой задачи.

Виджет не должен получать доступ к какой-либо информации, кроме той, которая явно передана ему через аргументы. Он должен заниматься только тем, что происходит внутри себя, и в лучшем случае отправлять действия обратно вверх. Ему не следует вмешиваться в работу DOM в других местах.

На мой взгляд, вам лучше использовать компонент.

Есть ли какая-то причина, по которой вы не можете найти JavaScript-функцию, которая обработает LaTeX, включая математические выражения, и вернёт его в виде HTML, который затем можно будет отрендерить в компоненте? Если удастся полностью избежать манипуляций с DOM вне фреймворка, это будет лучшим вариантом.

3

Мой сценарий использования следующий:

Я использую компонент баннеров тегов и редактирую его исходный код. По сути, некоторые описания тегов на моём сайте содержат LaTeX. И я хочу, чтобы они корректно отображались на баннере.

Я хотел добавить скрипт в раздел «Head» при настройке темы, вместо редактирования виджета. Но я не смог найти способ определить, загружен ли виджет, поэтому при вызове document.getElementById в разделе «Head» я получаю пустой элемент, так как соответствующий HTML-компонент, отображающий описание тега, ещё не загружен.

4

Вы не можете гарантировать, когда будет загружен виджет или компонент. Однако вы можете выполнить работу в событии компонента, например, didInsertElement.