0

パッケージreact-mathjaxを使用して、React コンポーネントにいくつかの数学表記を含めています。

プロジェクトの特異性 (質問を簡単にするためにここでは説明しません) のため、このコンポーネントを文字列に変換し、.html を使用して div に html 文字列を挿入する必要があります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コンポーネントを直接レンダリングすると機能します。コンポーネントをデフォルトの HTML タグでラップしMathて文字列に変換すると、デフォルトの HTML タグが変換されます (ただし、Mathコンポーネントは無視されます)。したがって、デフォルトの HTML タグを変換するMathコンポーネントにも問題はありません。ReactDOMServer

何か案が？

これは CodeSandbox を使用したデモです: https://codesandbox.io/s/Compentient-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