在后台从 React 组件制作 HTML 字符串，如何在另一个 React 组件中通过危险的SetInnerHTML 使用该字符串

Question

I'm trying to render LaTeX strings in a React project. Although I use the react-mathjax React 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.

My current code I tried

Sample code is here: https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx

1. LaTeX strings are given as strings
2. Make an empty DOM aDom by document.createElement('span') (in background. not in the document DOM tree.)
3. Render a LaTeX string by ReactDOM.render into aDom
4. After rendering, get a string by aDom.innerHTML or .outerHTML

Problem

The value of aDom.innerHTML (or .outerHTML ) is "<span><span data-reactroot=\\"\\"></span></span>" (almost empty) although aDom has a perfect tree that MathJax generated.

Briefly,

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

A screenshot console.log of aDom and aDom.outerHTML

Question

How can I get the 'correct' HTML string from aDom above?

Answer 1

This seems to work just fine if you want to render any component to a HTML string:

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

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

Answer 2

From what I see, you are getting what you'd expect to get.

Given a root element ( aDom in your case), ReactDOM will render it's root component inside this element, and this component's element will have the attribute 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.

 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>

Answer 3

I recommend using renderToStaticMarkup over renderToString as it does not add any extra DOM attributes that React uses internally, like `data-reactroot:

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

getString() {
  return renderToStaticMarkup(<AnyComponent />)
}

Documentation: