Intento mostrar MathML usando el complemento Wiris. Al cargar el script, genera etiquetas matemáticas, pero cuando agrega dinámicamente otras nuevas, no se procesan.

Matemáticas.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;

Aplicación.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;

Los elementos que se procesaron primero se muestran correctamente. Pero cuando agrega uno nuevo, no se ven afectados.

No cambia el resultado si agrego el script como se muestra a continuación en lugar de reaccionar-casco:

 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); }; }, []);

¿Cómo podría representarlos todos correctamente en mi aplicación de reacción?