将dom元素转换为widgets中的虚拟dom

开发
1

我目前有一个自定义 KaTeX 渲染生成的 DOM 元素。

它是这样生成的：

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，这会引发错误。我尝试提供内部 HTML：

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

这会将 dom_element.innerHTML 中的标签渲染为纯文本而不是 HTML。

有解决方案吗？

2

小部件几乎肯定不是处理此问题的正确工具。

小部件不应访问除通过 args 显式提供给它的任何其他信息，并且之后应只关注其内部发生的事情，最多只能将操作发送回父级。它不应涉及其他地方的 DOM。

依我看，使用组件会更好。

你是否无法找到一个可以处理乳胶（包括数学内容）并将其作为 HTML 返回的 JavaScript 函数，然后你可以在组件中渲染它？如果可以完全避免框架外的 DOM 操作，那将是最佳选择。

3

我的用例如下：

我正在使用标签横幅组件，并且正在编辑它的源代码。基本上，我网站上的一些标签描述包含 LaTeX。我想在横幅中正确地渲染它们。

我想在“自定义主题”的“Head”部分添加一个脚本，而不是编辑小部件。但我找不到一种方法来知道小部件是否已加载，因此当我在“Head”部分执行 document.getElementById 时，我会得到一个空元素，因为显示标签描述的相关 HTML 组件尚未加载。

4

您无法保证小部件或组件何时加载。但是，您可以在组件事件（如 didInsertElement）中完成工作。