如何在 React 中加载 MathJax？答案

【问题标题】：How to load MathJax in React?如何在 React 中加载 MathJax？
【发布时间】：2019-05-17 12:41:54
【问题描述】：

我使用 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 甚至无法识别页面中的内容吗？

【问题讨论】：

你也可以使用一个包来处理我写的better-react-mathjax，你可以完全使用它（只关心数学内容）或处理MathJax的下载（然后使用@ 987654328@ 或 startup 属性（取决于版本））并在您的 React 组件中手动完成工作。文档包含大量示例。

标签： javascript reactjs mathjax

【解决方案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);
})();

【讨论】：

【解决方案2】：

公式渲染只能在 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的作者。

【讨论】：