Tengo tres scripts en index.html en la carpeta pública:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.6.1/jquery.zoom.min.js"></script> <script> $(document).ready(function () { $("#ex1").zoom(); }); </script>Y en el componente tengo una imagen que funciona con estos scripts:
import React from "react"; import "./Home.css"; function Home() { return ( <React.Fragment> <div class="zoom" id="ex1"> <img src="https://i.pinimg.com/736x/3e/3e/49/3e3e49c8e76076f09ef1170a95b09cfb.jpg" class="img" alt="Daisy on the Ohoopee" /> </div> </React.Fragment> ); } export default Home;Quiero tener todos los scripts en el componente exacto pero no sé cómo.
¿Cómo puedo mover todas las secuencias de comandos de index.html en la carpeta pública a mi componente de reacción?
Puede crear el script dinámicamente:
useEffect(()=>{ const script = document.createElement("script"); script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; script.async = true; document.body.appendChild(script); },[]);pero no se recomienda cargar scripts dentro del componente.