ReactDOMServer不将组件呈现为字符串(第三方库-react mathjax)
ReactDOMServer不将组件呈现为字符串(第三方库-react mathjax)
提问于 2021-11-24 11:36:19
我使用包反应-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 = () => (
<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 }} />
</>
);
}回答 1
Stack Overflow用户
发布于 2022-04-06 15:57:02
添加像这样的函数
const returnMathMl = (data) => {
return (
<span
dangerouslySetInnerHTML={{
__html: `${data}`.replace(/\n[\s]*/g, ''),
}}
/>
);
};然后用MathJax包装组件，代码应该如下所示
const returnMathMl = (data) => {
return (
<span
dangerouslySetInnerHTML={{
__html: `${data}`.replace(/\n[\s]*/g, ''),
}}
/>
);
};
return (
<MathJax>
{returnMathMl(myData)}
</MathJax>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70095384
复制相关文章
相似问题
腾讯云开发者
