Question

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

我在class PickUpPoint { public String shelving; public String cardinalPoint; public String getShelving() { return shelving; } public String getCardinalPoint() { return cardinalPoint; } PickUpPoint(String shelving, String cardinalPoint) { this.shelving = shelving; this.cardinalPoint = cardinalPoint; } }，componentDidMount()和componentWillMount()函数中包含了一个脚本（如下所示），但未呈现。

MathJax脚本已被获取，但它并没有随脚本一起提供，而该脚本具有呈现以前出现的方程式所需的配置和其他字体。

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

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

componentDidUpdate()

我以前曾经有一个简单的页面，例如

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

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

Answer 1

公式渲染只能在 MathJax 加载所有需要的资源并完成初始化后发生。这就是 m51's solution 不正确的原因，因为它侦听脚本元素的加载事件。那个时候MathJax是不能保证初始化的。

您需要使用 MathJax 提供的官方 ready 回调。以下示例假定您使用的是当前版本 MathJax 3.1.x（请参阅 MathJax documentation）。请注意，在加载 MathJax 库之前需要添加以下脚本元素。

<script>
window.MathJax = {
  startup: {
    ready: () => {
      MathJax.startup.defaultReady();
      // MathJax is initialized and you can trigger a typeset.
    }
  }
};
</script>

那时MathJax 排版是可能的。但可能需要进一步延迟排版，因为无法保证 React 已完成创建和插入 HTML 节点。

因此，您需要考虑两种情况：

MathJax 首先初始化，React 未完成渲染。
React 首先完成渲染，MathJax 初始化仍在等待中。

根据情况，您需要在 MathJax 就绪回调（情况 1）或 React 生命周期方法（情况 2）中延迟排版。

对此有许多可能的解决方案。一种可能是，混合使用全局变量和 setTimeout 来编排流程。其他涉及使用承诺。但是对此的具体解决方案超出了本答案的范围。

我建议使用一个可以抽象出这个问题和其他问题的库：react-mathjax-node

免责声明：我是react-mathjax-node的作者。

Answer 2

我的猜测是-您需要在脚本加载后运行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);
})();

如何在React中加载MathJax？

2 个答案: