javascript - 使用 Wiris MathML 脚本在 React 中渲染数学标签

Question

我尝试使用 Wiris 插件显示 MathML。加载脚本会渲染数学标签，但是当您动态添加新标签时，它们不会被渲染。

数学.js

import { Helmet } from "react-helmet";

function Math(params) {
  const mString =
    `<p><strong>What is the result ?</strong></p><p>` +
    `<math xmlns="http://www.w3.org/1998/Math/MathML"><mroot><mn>27</mn><mn>3</mn></mroot><mo>&nbsp;</mo><mo>+</mo><mo>&nbsp;</mo><mfrac>` +
    `<mn>9</mn><mn>3</mn></mfrac></math></p>`;

  return (
    <div>
      {" "}
      <Helmet>
        <script
          src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image&async=true"
          type="text/javascript"
        />
      </Helmet>
      <div id="htmlParser" dangerouslySetInnerHTML={{ __html: mString }}></div>
    </div>
  );
}

export default Math;

应用程序.js

import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import Math from "./Math";

function Home() {
  const [counter, setCounter] = useState(3);

  const handleIncrease = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={handleIncrease}
        style={{ marginInline: 12 }}
      >
        Add
      </Button>
      {[...Array(counter)].map((el, index) => (
        <Math />
      ))}
    </div>
  );
}

export default Home;

首先渲染的项目正确显示。但是当您添加新的时，它们不会受到影响。

如果我添加如下脚本而不是 react-helmet，它不会改变结果：

useEffect(() => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image&async=true';
        document.head.appendChild(script);
    return () => {
        document.head.removeChild(script);
    };
}, []);

我怎样才能在我的反应应用程序中正确渲染它们？