React Mathjax2 不适用于 React 版本 17

Question

我之前在 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>

提前致谢。

Answer 1

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: [["$", "$"]],
      displayMath: [["$$", "$$"]]
    }
  };

  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.

以下是工作示例：

React Mathjax2 不适用于 React 版本 17

React Mathjax2 does not work on React version 17

html

javascript

node.js

mathjax

reactjs