Javascript 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>
}

---

提前感谢。

react-mathjax2

已经三年没有更新了

您可以尝试我编写的一个新库，名为React 17，旨在与最新的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>
  );
}

• 您需要在字符串中提供有问题的分隔符（

  $…$

  ）
• 版本3是默认版本，因此在第二个示例中，

  Version={3}

  是多余的
• 默认设置是使用MathJax默认配置，因此在我的简单示例中，我们需要提供配置的唯一原因是我们为Latex内联数学使用非默认分隔符（默认设置是

  \（

  ，而我们使用

  $

  ）。这一切都来自MathJax的工作方式，与

  更好地反应MathJax

  无关

以下是工作样本：

---

在快速反应中运行良好。但我不能在您提供的相同过程中使用版本3。非常感谢。对版本3有任何额外权限吗？您可以使用版本3，只需将版本属性设置为3并提供适当的版本3配置。我使用版本2，因为我认为这是您想要的：）你能提供版本3的配置吗？必须将任何配置更改为public.html文件吗？我用版本3添加了一个示例。在html文件中，应该删除带有MathJax配置的

script

标记和导入MathJax的

script

标记（这由

better react MathJax

处理）。

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

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

...

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}>
...