Javascript 在后台从 React 组件制作 HTML 字符串，如何在另一个 React 组件中通过危险的SetInnerHTML 使用该字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43567329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
提问by Nyoho
I'm trying to render LaTeX strings in a React project.
Although I use the react-mathjaxReact components, I want to get an HTML string made from the LaTeX strings in order to concatenate it and the other strings and set it by dangerouslySetInnerHTML.
我正在尝试在 React 项目中呈现 LaTeX 字符串。虽然我使用react-mathjaxReact 组件，但我想获取一个由 LaTeX 字符串组成的 HTML 字符串，以便将它和其他字符串连接起来，并通过危险的 SetInnerHTML 设置它。
My current code I tried
我尝试过的当前代码
Sample code is here: https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx
示例代码在这里：https: //github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx
- LaTeX strings are given as strings
- Make an empty DOM
aDombydocument.createElement('span')(in background. not in the document DOM tree.) - Render a LaTeX string by
ReactDOM.renderintoaDom - After rendering, get a string by
aDom.innerHTMLor.outerHTML
- LaTeX 字符串以字符串形式给出
aDom通过document.createElement('span')（在后台。不在文档 DOM 树中。）创建一个空的 DOM 。- 通过
ReactDOM.renderinto渲染 LaTeX 字符串aDom - 渲染后，通过
aDom.innerHTML或获取字符串.outerHTML
Problem
问题
The value of aDom.innerHTML(or .outerHTML) is "<span><span data-reactroot=\"\"></span></span>"(almost empty)
although aDomhas a perfect tree that MathJax generated.
aDom.innerHTML(or .outerHTML)的值是"<span><span data-reactroot=\"\"></span></span>"（几乎是空的），尽管aDom有一个 MathJax 生成的完美树。
Briefly,
简要地，
aDom:aDom.outerHTML:
aDom：aDom.outerHTML：
A screenshot console.log of aDomand aDom.outerHTML
的屏幕截图的console.logaDom和aDom.outerHTML
Question
题
How can I get the 'correct' HTML string from aDomabove?
如何从aDom上面获得“正确”的 HTML 字符串？
回答by wrdevos
This seems to work just fine if you want to render any component to a HTML string:
如果您想将任何组件呈现为 HTML 字符串，这似乎工作得很好：
import { renderToString } from 'react-dom/server'
renderToString() {
return renderToString(<MyAwesomeComponent some="props" or="whatever" />)
}
回答by squgeim
From what I see, you are getting what you'd expect to get.
从我所看到的，你得到了你期望得到的。
Given a root element (aDomin your case), ReactDOM will render it's root component inside this element, and this component's element will have the attribute data-reactroot.
给定一个根元素（aDom在您的情况下），ReactDOM 将在该元素内呈现它的根组件，并且该组件的元素将具有属性data-reactroot.
So what you are seeing is exactly how it should be. From what I've tested, the inner dom tree should be there as well.
所以你所看到的正是它应该的样子。根据我的测试，内部 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>The result in the console is:
控制台中的结果是：
<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>
