Tengo una función jQuery para alternar la clase en custom.js. Así que integro todo el CSS y arranco custom.js en una carpeta pública en HTML, pero todos los demás archivos funcionan bien, pero custom.js no funciona, así que instalo la biblioteca jQuery e importar jQuery y custom.js en index.js pero sigue siendo el mismo problema. ¿Hay alguna otra forma de lograr esto porque tengo más funciones en custom.js?
import $ from 'jquery; $(document).ready(function () { $(".mobile-filter-btn").click(function () { $(".plp-filter").addClass("visible"); }); $(".mob-heading-close-btn").click(function () { $(".plp-filter").removeClass("visible"); }); } <script type="text/jsx" src="%PUBLIC_URL%/assets/js/jquery-3.2.1.slim.min.js"></script> <script type="text/jsx" src="%PUBLIC_URL%/assets/js/popper.min.js"></script> <script type="text/jsx" src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script> <script type="text/jsx" src="%PUBLIC_URL%/assets/js/custom.js"></script>En realidad, asumo que funciona como se esperaba, pero el problema es que está intentando colocar controladores de clics cuando los componentes con esas clases aún no se representan.
Puede poner ese código jquery en una función, importarlo a su componente de reacción y luego usarlo en "componentDidMount" o useEffect con una matriz vacía de dependencias (funciona como componenteDidMount en componentes funcionales) según los componentes que esté usando.
De esta manera, se asegurará de que todo se represente y tenga dónde colocar los controladores de clic.
Para verificar esto, intente consola.log $(".mobile-filter-btn") en su código. Espero que sea indefinido.
Además, esta no es una buena idea para que jquery reaccione. Puede que no funcione muy bien con él y produzca muchos errores o problemas de mantenimiento.