0

我正在使用包react-mathjax在 React 组件中包含一些数学符号。

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

这是组件：

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组件，它可以工作。如果我Math用一些默认 HTML 标签包装组件并将其转换为字符串，则默认 HTML 标签会被转换（但Math组件被忽略）。因此，该Math组件也没有ReactDOMServer转换默认 HTML 标记的问题。

任何想法？

这是一个使用 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 = () => (
  <span>
    <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 }} />
    </>
  );
}
4

0 回答 0