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.
Sample code is here: https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx
aDom
by document.createElement('span')
(in background. not in the document DOM tree.)ReactDOM.render
into aDom
aDom.innerHTML
or .outerHTML
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,
aDom
: 🙆aDom.outerHTML
: 🙅A screenshot console.log of aDom
and aDom.outerHTML
How can I get the 'correct' HTML string from aDom
above?
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" />)
}