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

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

(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.Hub.Queue(["Typeset",MathJax.Hub]);在脚本加载后运行 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
    }

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

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