Estoy usando un portal de pago de la vieja escuela en mi aplicación React que requiere que su secuencia de comandos JQuery se importe para representar correctamente un widget de iFrame .

Entré en mi archivo index.js en la carpeta public y agregué el script en el encabezado:

 <script type="text/javascript" src="https://vendorUrl.com/popup.js"></script>

Entre otras cosas, el script al que se hace referencia garantiza que el iFrame esté oculto en el inicio hasta que se haga clic en un botón:

 jQuery(document).ready(function () { var iframe = document.getElementById("SpecificIFrame"); ... iframe.style.opacity = 0; iframe.style.transition = 'opacity .5s ease-in-out'; jQuery(".show-popup").on("click", function (e) { e.preventDefault(); openPopup(); }); }); function openPopup() { var iframe = document.getElementById("SpecificIFrame"); iframe.style.opacity = 1; iframe.style.width = '100%'; iframe.style.height = '100%'; ... }

Entonces, cuando en mi componente funcional creo el iFrame , me sorprende ver que es visible e ignora todo el código jQuery en el script externo.

 import $ from "jquery"; export default function MyComponent() { return( <> <iframe id='SpecificIFrame' src='https://myUrl.com/...'> </iframe> <button className='show-popup'>Pay via Platform</button> </> ) }

¿Por qué se ignora el script? ¿Qué puedo hacer para arreglar esto, por favor?