React Mathjax2 不适用于 React 版本 17

Question

React Mathjax2 不适用于 React 版本 17

Mij*_*man 1 html javascript node.js mathjax reactjs

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

Run Code Online (Sandbox Code Playgroud)

我的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>

Run Code Online (Sandbox Code Playgroud)

提前致谢。

Answer 1

fas*_*xes 6

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>
  );
}

Run Code Online (Sandbox Code Playgroud)

要执行相同的操作，但使用 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>
  );
}

Run Code Online (Sandbox Code Playgroud)

需要注意的一些事项：

您可以将 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}>
...

Run Code Online (Sandbox Code Playgroud)

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

以下是工作示例：

归档时间：	4 年，6 月前
查看次数：	1527 次
最近记录：	4 年，6 月前