Question

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

我尝试的当前代码

示例代码在此处：https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx

LaTeX字符串以字符串形式提供
按aDom制作一个空的document.createElement('span')（在后台。不在文档DOM树中。）
将ReactDOM.render的LaTeX字符串渲染到aDom
渲染后，按aDom.innerHTML或.outerHTML

问题

aDom.innerHTML（或.outerHTML）的值为"<span><span data-reactroot=\"\"></span></span>"（几乎为空）虽然aDom有一个MathJax生成的完美树。

简言之，

aDom：
aDom.outerHTML：

A screenshot console.log of aDom and 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树也应该在那里。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

控制台中的结果是：

<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>

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

我尝试的当前代码

问题

问题

2 个答案: