Как загрузить MathJax в React? - PullRequest
Новая
       15

Как загрузить MathJax в React?

0 голосов
/ 17 мая 2019

Я написал приложение, использующее HTML, которое может отображать MathJax из тега script. Теперь я перешел на 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 даже не распознает содержимое страницы?

1 Ответ

0 голосов
/ 17 мая 2019

Полагаю, вам нужно запустить синтаксический анализатор 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);
})();
...