Tengo dos versiones de un componente que muestran un archivo usando la biblioteca Jsmol. La primera versión funciona, pero mostrará el archivo antes de recibir la entrada del usuario. Quiero que las funciones de Jsmol se ejecuten después de recibir la entrada del usuario, así que coloco las funciones dentro de componentDidUpdate. Sin embargo, cuando hago esto, el Jsmol no funciona en absoluto. Estoy pensando que es para prevenir ataques de secuencias de comandos entre sitios.

Este es el código para mi componenteDidMount (Esto ejecuta JavaScript en innerHTML):

 componentDidMount() { const script = document.createElement("script"); script.id = "display" script.type = 'text/JavaScript'; script.innerHTML = "jmolInitialize('jmol-14.32.63/jsmol');\ jmolApplet(400, `load results.pdb`, 0);" this.instance.appendChild(script); } render() { return ( <> <div id="display" ref={el => (this.instance = el)} /> </> ); }

Y esta es otra versión del código (Esto no ejecuta el JS en innerHTML):

 componentDidUpdate() { const script = document.getElementById("jsmol-script"); script.innerHTML = "jmolApplet(400, `load results/1A6W.pdb`, 0);" } render() { return ( <> <div id="display" ref={el => (this.instance = el)} > <script id="jsmol-script" type="JavaScript"></script> </div> </> ); }