Me pregunto cómo agregaría un script externo a una aplicación React y haría que sus funciones estén disponibles. Tomemos este script https://www.cssscript.com/confetti-falling-animation/
En una "aplicación sin reacción", lo agregaría así en mi DOM
<script src="confetti.js"></script>y luego llamar a sus funciones como esta
startConfetti();o
stopConfetti(); Sin embargo, esto no funciona en React . Sé que puedo agregar una etiqueta <script /> como esta:
useEffect(() => { const script = document.createElement('script'); script.src = './confetti.js'; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, []); Pero esto no hace que las funciones startConfetti() o stopConfetti() estén disponibles. Son undefined .
¿Cómo agregaría el script y sus funcionalidades en una aplicación React ?
Agregue el script en la etiqueta principal de index.html , así (con la ruta correcta al archivo JavaScript):
<script src="confetti.js"></script> Luego, en su componente React, puede obtenerlo con la ayuda del objeto de window , de esta manera:
const startConfetti = window.startConfetti; startConfetti();