从后台的React组件制作HTML字符串,如何在另一个React组件中使用dangerouslySetInnerHTML的字符串

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

我试过的当前代码

示例代码如下:https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx

LaTeX字符串以字符串形式给出

创建一个空的DOM aDom通过document.createElement('span')(在后台,没有在文档DOM树.)

将一个LaTeX字符串渲染ReactDOM.render为aDom

渲染后,通过aDom.innerHTML或获取一个字符串.outerHTML

问题

的价值aDom.innerHTML(或.outerHTML)是""(几乎是空的),虽然aDom具有MathJax生成一个完美的树.

简单地说,

aDom:

aDom.outerHTML:

屏幕截图console.log aDom和aDom.outerHTML

题

如何从aDom上方获取"正确的"HTML字符串？

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

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

renderToString() {
  return renderToString()
}