Compré la plantilla html. Cuando trato de usarlo en el proyecto de reacción, algunas funciones no funcionan. Uno de ellos carrusel de búhos. Archivo de plantilla owl.js agregando dinámicamente divs y diseñándolos. Esta sección funciona en la página html pero no en reaccionar. No me sale ningún error de la consola.
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>aaa</title> <link href="assets/css/bootstrap.css" rel="stylesheet"/> <link href="assets/css/style.css" rel="stylesheet"/> <link href="assets/css/responsive.css" rel="stylesheet"/> <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/> <link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body> <div id="root"></div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/jquery-ui.js"></script> <script src="assets/js/jquery.fancybox.js"></script> <script src="assets/js/owl.js"></script> <script src="assets/js/wow.js"></script> <script src="assets/js/isotope.js"></script> <script src="assets/js/mixitup.js"></script> <script src="assets/js/appear.js"></script> <script src="assets/js/validate.js"></script> <script src="assets/js/script.js"></script> <script src="assets/js/map-script.js"></script> </body> </html>Con React, sus archivos públicos, como los archivos JavaScript, deben estar en una carpeta llamada 'pública' en su aplicación React, luego en index.html esto debe indicarse como '%PUBLIC_URL%'. En otras palabras, mueva su carpeta de activos a una carpeta llamada pública y agregue '%PUBLIC_URL%/' antes de las rutas de sus archivos.
Después de 4 horas encontré la solución para mi problema. Es definir enlaces de script en el componente en lugar de index.html. Espero que esta publicación ayude a más personas.
import '../assets/css/bootstrap.css'; import '../assets/css/style.css'; import '../assets/css/responsive.css'; import React,{ useEffect } from 'react'; import { Helmet } from 'react-helmet'; const useScript = (src) => { useEffect(() => { const tag = document.createElement('script'); tag.async = true; tag.src = src; document.body.appendChild(tag); return () => { document.body.removeChild(tag); } }, [src]) } export function Home(){ useScript('./assets/js/jquery.js'); useScript('./assets/js/bootstrap.min.js'); useScript('./assets/js/popper.min.js'); useScript('./assets/js/jquery-ui.js'); useScript('./assets/js/jquery.fancybox.js'); return( <div> <Helmet> <title>{model.Title}</title> <meta name="description" content={model.Desc}/> <meta name="keywords" content={model.Keys}/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial- scale=1.0, maximum- scale=1.0, user-scalable=0"></meta> </Helmet> ....... </div> ) }