React Mathjax2 不适用于 React 版本 17

如何解决React Mathjax2 不适用于 React 版本 17

我之前在 react 16 上运行过 recat-matcjax2。它运行良好。但是当将 react 版本 16 更新到 17 时，它无法完美运行。

我遇到了一些错误。

尝试实现：

import MathJax from 'react-mathjax2';
const equation = '(a+b)^2';

const MathJax = () => {

return <MathJax.Context input='ascii' key='math'>
                           
          <MathJax.Node inline>{equation} </MathJax.Node>

       </MathJax.Context>
}

我的 index.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <Meta name="viewport" content="width=device-width,initial-scale=1" />
  <Meta name="theme-color" content="#000000" />
  <Meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
    tex2jax: {delimiters: [['$','$']]},"HTML-CSS": { 
      linebreaks: { automatic: true },mtextFontInherit: true,availableFonts : ["Stix"],preferredFont : "Stix",webFont : "Stix-Web",},CommonHTML: {
      linebreaks: { automatic: true },mtextFontInherit: true 
      },SVG: { 
      linebreaks: { automatic: true },mtextFontInherit: true
     }
  });
    </script>
  <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML"></script>

  <title>LMS App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

提前致谢。

解决方法

react-mathjax2 已经 3 年没有更新了。

您可以尝试我编写的名为 better-react-mathjax 的新库，该库旨在与最新的 React 17 一起使用。您可以将 MathJax 版本 2 和 3 与它一起使用。

以下是 better-react-mathjax 的示例，它可以使用 MathJax 版本 2 完成您想要的操作：

export default function App() {
  const config = {
    tex2jax: {
      inlineMath: [["$","$"]],displayMath: [["$$","$$"]]
    }
  };

  const equation = "$(a+b)^2$";

  return (
    <MathJaxContext config={config} version={2}>
      <MathJax inline>
        {equation}
      </MathJax>
    </MathJaxContext>
  );
}

要使用 MathJax 版本 3 执行相同操作，您可以使用：

export default function App() {
  const config = {
    loader: { load: ["[tex]/html"] },tex: {
      packages: { "[+]": ["html"] },inlineMath: [["$","$$"]]
    }
  };

  const equation = "$(a+b)^2$";

  return (
    <MathJaxContext config={config} version={3}>
      <MathJax inline>
        {equation}
      </MathJax>
    </MathJaxContext>
  );
}

注意事项：

您将 MathJax 配置直接提供给 React 上下文组件，而不必像在示例中那样将其添加到 script 标签中。使用您的配置（如给 MathJax.Hub.Config），这会转化为：

...

const config = {
    tex2jax: {delimiters: [['$','$']]},"HTML-CSS": { 
      linebreaks: { automatic: true },mtextFontInherit: true,availableFonts : ["STIX"],preferredFont : "STIX",webFont : "STIX-Web",},CommonHTML: {
      linebreaks: { automatic: true },mtextFontInherit: true 
      },SVG: { 
      linebreaks: { automatic: true },mtextFontInherit: true
     }
  }
...
<MathJaxContext config={config} version={2}>
...

您需要在字符串 ( $...$ ) 中提供有问题的分隔符。
版本 3 是默认值，因此在第二个示例中 version={3} 是多余的。
默认是使用 MathJax 默认配置，所以我们需要在我的简单示例中提供配置的唯一原因是我们对 Latex 内联数学使用非默认分隔符（默认为 \( 而我们使用 $）。这一切都来自 MathJax 的工作原理，与 better-react-mathjax 无关。

以下是工作示例：