我使用包 反应-mathjax 在一个React组件中包含一些数学符号。

由于项目的特殊性(为了简化这个问题，我不会在这里讨论)，我需要将这个组件转换成一个字符串，并使用 dangerouslySetInnerHTML 将html字符串注入到div中。

这是构成部分：

import MathJax from "react-mathjax";
const Math = () => (
  <MathJax.Provider>
    <MathJax.Node inline formula="x=2" />
  </MathJax.Provider>
);

由于某些原因，当我试图使用 ReactDOMServer 将其转换为字符串时，它无法工作(它返回一个空字符串)：

const html = ReactDOMServer.renderToString(<Math />); // first attempt
const htmlStaticMarkup = ReactDOMServer.renderToStaticMarkup(<Math />); // second attempt

如果我直接呈现 Math 组件，它就能工作。如果我用一些默认的HTML标记包装 Math 组件并将其转换为string，默认的HTML标记就会被转换(但是忽略了 Math 组件)。因此， Math 组件和转换默认 ReactDOMServer 标记的 ReactDOMServer 都没有问题。

有什么想法吗？

这是一个使用CodeSandbox： https://codesandbox.io/s/competent-payne-uvww0?file=/src/App.js 的演示

这是完整的源代码：

import ReactDOMServer from "react-dom/server";
import MathJax from "react-mathjax";
const Math = () => (
  <MathJax.Provider>
    <MathJax.Node inline formula="x=2" />
  </MathJax.Provider>
const CustomHtml = () => (
    <Math />
    <p>Common HTML</p>
  </span>
const html = ReactDOMServer.renderToString(<CustomHtml />);
const htmlStaticMarkup = ReactDOMServer.renderToStaticMarkup(<CustomHtml />);
export default function App() {
  return (
      <p>Using the Math component and some default HTML directly: </p>
      <CustomHtml />
      <p>Using the Math component and some default HTML tags as a string (ReactDOMServer.renderToString): </p>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      <p>Using the Math component and some default HTML tags as a string (ReactDOMServer.renderToStaticMarkup): </p>
      <div dangerouslySetInnerHTML={{ __html: htmlStaticMarkup }} />
}