在React中使用作为脚本动态加载的MathJax访问MathJax.Hub

npm install mathjax

yarn add mathjax

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      {/* 在此处使用MathJax */}
    </div>
  );
};

export default MyComponent;

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML";
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, "my-mathjax-element"]);
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      <div id="my-mathjax-element">
        {/* 数学公式 */}
      </div>
    </div>
  );
};

export default MyComponent;