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

Answer 2

只有在 MathJax 加载了所有需要的资源并完成初始化后，才能进行公式渲染。这就是不正确的原因，因为它监听脚本元素的加载事件。到时候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.

的作者

如何在 React 中加载 MathJax？

How to load MathJax in React?

javascript

mathjax

reactjs