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

import React, { useEffect } from 'react';

const MathJaxComponent = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://polyfill.io/v3/polyfill.min.js?features=es6';
    script.async = true;
    document.head.appendChild(script);

    script.onload = () => {
      const mathScript = document.createElement('script');
      mathScript.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML';
      mathScript.async = true;
      document.head.appendChild(mathScript);

      mathScript.onload = () => {
        // MathJax is now loaded and can be configured
        MathJax.Hub.Config({
          tex2jax: { inlineMath: [['$', '$'], ['\\\\(', '\\\\)']] }
        });
      };
    };

    return () => {
      // Cleanup if necessary
    };
  }, []);

  return (
    <div>
      When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
      $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </div>
  );
};

export default MathJaxComponent;

mathScript.onload = () => {
  MathJax.Hub.Config({
    // Configuration options here
  });

  // Example of using MathJax.Hub to typeset a specific element
  MathJax.Hub.Queue(['Typeset', MathJax.Hub, document.getElementById('math-content')]);
};