Визуализируйте математические уравнения (латекс) с помощью MathJax и React Hooks

Самый простой способ визуализировать Latex в React с помощью Mathjax - добавить конфигурацию Mathjax в файл index.html под тегом Javascript script.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$","$"],["\\(","\\)"]],
displayMath:[["$$", "$$"], ["\\[","\\]"]]
},
showMathMenu: false,
messageStyle: "none"
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Но проблема возникает, когда DOM обновляется, Mathjax не обрабатывает.

Mathjax предлагает решение нашей проблемы с Mathjax Hub Queue.

Итак, давайте создадим файл компонента со следующим кодом:

import React, { useEffect } from 'react';
function Latex(props) {
  let node = React.createRef();
  useEffect(() => {
    renderMath();
  });
  const renderMath = () => {
    window.MathJax.Hub.Queue([
      "Typeset", 
      window.MathJax.Hub,
      node.current
   ]);
  }
  return (
    <div ref={node}>
      {props.children}
    </div>
  );
}
export default Latex;

Теперь вы можете обернуть все свое приложение в этот латексный компонент.

Таким образом, где бы ни был найден латексный формат, он будет отображаться как математическое уравнение.

ReactDOM.render(<Latex><App/></Latex>, rootElement);

Вот и все!!!