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

Question

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

我试过的当前代码

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

1. LaTeX字符串以字符串形式给出
2. 创建一个空的DOM aDom通过document.createElement('span')(在后台,没有在文档DOM树.)
3. 将一个LaTeX字符串渲染ReactDOM.render为aDom
4. 渲染后,通过aDom.innerHTML或获取一个字符串.outerHTML

问题

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

简单地说,

1. aDom:
2. aDom.outerHTML:

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

题

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

Answer 1

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

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

renderToString() {
  return renderToString(<MyAwesomeComponent some="props" or="whatever" />)
}

Answer 2

从我所看到的，你得到了你期望得到的。

给定一个根元素（aDom在您的情况下），ReactDOM 将在该元素内呈现它的根组件，并且该组件的元素将具有属性data-reactroot.

所以你所看到的正是它应该的样子。根据我的测试，内部 dom 树也应该在那里。

var Another = React.createClass({
  render: function() {
    return (
      <div>Just to see if other components are rendered as well</div>
    );
  }
});

var Hello = React.createClass({
  render: function() {
    return (
      <div id="first"> 
        <div id="sec-1">Hello</div>
        <div id="sec-2">{ this.props.name }</div>
        <Another />
      </div>
    );
  }
});

var a = document.createElement('div');

ReactDOM.render(
  <Hello name = "World" /> ,
  a
);

console.log(a.outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

控制台中的结果是：

<div><div data-reactroot="" id="first"><div id="sec-1">Hello</div><div id="sec-2">World</div><div>Just to see if other components are rendered as well</div></div></div>