javascript - 如何在 React 中加载 MathJax？

Question

我使用 HTML 编写了一个应用程序，它可以从脚本标签呈现 MathJax。现在我转向了 React，但 MathJax 方程根本没有渲染。

我在 componentDidMount() 中包含了一个脚本(如下所示) , componentWillMount()和 componentDidUpdate()功能，但它不是渲染。

MathJax 脚本正在被获取，但它没有返回带有配置和其他字体的脚本，这些字体需要渲染以前出现的方程。

我也尝试引入 MathJax React 插件(https://www.npmjs.com/package/react-mathjax)。

我在上述方法中使用的代码:

(function () {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "/MathJax/MathJax.js";   // use the location of your MathJax

  var config = 'MathJax.Hub.Config({' +
             'extensions: ["tex2jax.js"],' +
             'jax: ["input/TeX","output/HTML-CSS"]' +
             '});' +
             'MathJax.Hub.Startup.onload();';

  if (window.opera) {script.innerHTML = config}
           else {script.text = config}

  document.getElementsByTagName("head")[0].appendChild(script);
})();

早些时候我曾经有一个简单的页面，比如

<script src=<MathJax link> />
    <span>Some Equation</span>
</html>

这是因为 MathJax 甚至无法识别页面中的内容吗？

Answer 1

我的猜测是 - 你需要运行 Mathjax 解析器 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);脚本加载后。

尝试像这样修改您的脚本:

(function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "/MathJax/MathJax.js";   // use the location of your MathJax

    var config = 'MathJax.Hub.Config({' +
        'extensions: ["tex2jax.js"],' +
        'jax: ["input/TeX","output/HTML-CSS"]' +
        '});' +
        'MathJax.Hub.Startup.onload();';

    if (window.opera) {
        script.innerHTML = config
    } else {
        script.text = config
    }

    script.addEventListener('load', function() {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    })

    document.getElementsByTagName("head")[0].appendChild(script);
})();