javascript - 在后台从 React 组件制作 HTML 字符串，如何在另一个 React 组件中通过 dangerouslySetInnerHTML 使用该字符串

Question

我正在尝试在 React 项目中呈现 LaTeX 字符串。虽然我使用 react-mathjax React 组件，我想获得一个由 LaTeX 字符串组成的 HTML 字符串，以便将它与其他字符串连接起来，并通过 dangerouslySetInnerHTML 进行设置。

我尝试过的当前代码

鳕鱼样本 here

1. LaTeX 字符串以字符串形式给出
2. 创建一个空 DOM aDom通过 document.createElement('span') (在后台。不在文档 DOM 树中。)
3. 通过 ReactDOM.render 呈现 LaTeX 字符串进入aDom
4. 渲染后，通过aDom.innerHTML得到一个字符串或 .outerHTML

问题

aDom.innerHTML 的值(或 .outerHTML )是 "<span><span data-reactroot=\"\"></span></span>" (几乎是空的)虽然aDom有 MathJax 生成的完美树。

简而言之，

1. aDom : 🙆
2. aDom.outerHTML : 🙅

问题

如何从 aDom 获取“正确”的 HTML 字符串以上？

Answer 1

如果您想将任何组件呈现为 HTML 字符串，这似乎工作得很好:

import { renderToStaticMarkup } from 'react-dom/server'

function componentToString() {
  return renderToStaticMarkup(<MyAwesomeComponent some="props" or="whatever" />)
}