# 将dom元素转换为widgets中的虚拟dom
**URL:** https://meta.discourse.org/t/converting-a-dom-element-to-virtual-dom-in-widgets/238346
**Category:** Development
**Created:** [2022年九月7日 14:28 UTC](https://meta.discourse.org/t/converting-a-dom-element-to-virtual-dom-in-widgets/238346 "2022-09-07T14:28:55Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@attj](https://meta.discourse.org/u/attj)
#### Post date: [2022年九月7日 14:28 UTC](https://meta.discourse.org/t/converting-a-dom-element-to-virtual-dom-in-widgets/238346/1 "2022-09-07T14:28:56Z")
我目前有一个自定义 KaTeX 渲染生成的 DOM 元素。
它是这样生成的：
```plaintext
var dom_element = document.createElement("p")
dom_element.innerHTML = "some text that contain latex"
renderMathInElement(dom_element)
```
此时 dom\_element 包含了我想要渲染的 HTML。我通过以下方式返回它：
```plaintext
html() {
return h(some other component ...... , h("div", dom_element))
}
```
由于 h 期望一个 VNode，这会引发错误。我尝试提供内部 HTML：
```plaintext
html() {
return h(some other component ...... , h("div", dom_element.innerHTML))
}
```
这会将 dom\_element.innerHTML 中的标签渲染为纯文本而不是 HTML。
有解决方案吗？
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年九月7日 15:28 UTC](https://meta.discourse.org/t/converting-a-dom-element-to-virtual-dom-in-widgets/238346/2 "2022-09-07T15:28:25Z")
小部件几乎肯定不是处理此问题的正确工具。
小部件不应访问除通过 args 显式提供给它的任何其他信息，并且之后应只关注其内部发生的事情，最多只能将操作发送回父级。它不应涉及其他地方的 DOM。
依我看，使用组件会更好。
你是否无法找到一个可以处理乳胶（包括数学内容）并将其作为 HTML 返回的 JavaScript 函数，然后你可以在组件中渲染它？如果可以完全避免框架外的 DOM 操作，那将是最佳选择。
---
### Author:  [@attj](https://meta.discourse.org/u/attj)
#### Post date: [2022年九月7日 15:42 UTC](https://meta.discourse.org/t/converting-a-dom-element-to-virtual-dom-in-widgets/238346/3 "2022-09-07T15:42:33Z")
我的用例如下：
我正在使用标签横幅组件，并且正在编辑它的源代码。基本上，我网站上的一些标签描述包含 LaTeX。我想在横幅中正确地渲染它们。
我想在“自定义主题”的“Head”部分添加一个脚本，而不是编辑小部件。但我找不到一种方法来知道小部件是否已加载，因此当我在“Head”部分执行 document.getElementById 时，我会得到一个空元素，因为显示标签描述的相关 HTML 组件尚未加载。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年九月7日 15:47 UTC](https://meta.discourse.org/t/converting-a-dom-element-to-virtual-dom-in-widgets/238346/4 "2022-09-07T15:47:16Z")
您无法保证小部件或组件何时加载。但是，您可以在组件事件（如 didInsertElement）中完成工作。