Estoy haciendo una pagina, de tipo ecommerce. Recién empiezo con react y un framework de css. Está en estado de desarrollo. Estoy usando MaterializeCSS, webpack y babel.
El carrusel funciona bien hasta que vas y volvés de otra página(componente) usando react-router. Cuando vuelvo a la página(componente) donde está el carrusel, este deja de funcionar:
- Las imágenes no se renderizan en el componente. Pero estas imágenes, el html y css del carrusel existen en el DOM (lo chequeé con Crhome Dev Tools).
- El carrusel no tiene funcionalidad. Pero conservo algunas propiedades de MaterializeCSS, como por ejemplo la altura (height) del contenedor con la clase .carousel.
Cuando refresco la página el carrusel funciona bien, hasta que me muevo a otra página y vuelvo.
probé:
- Inicializar el javascript del carrusel en componentDidMount(){}.
- Inicializarlo con hooks con useEffect.
- Importar materialize.js y materialize.css en App.js o en CarouselHome.jsx
- Import M from "materialize-css" en CarouselHome.jsx o no importarlo para nada (solo para probar si había alguna modificación. Per no.)
Y siempre tengo el mismo problema.
Observaciones:
- Cuando remuevo la clase .carousel del componente no tengo problema con el renderizado de las imágenes cuando me muevo entre las paginas. Pero obviamente el carrusel deja de funcionar porque no tiene la clase .carousel.
- El componente se monta y desmonta sin problemas.
- Las configuraciones que se le pueden hacer al carrusel en sus opciones funcionan perfecto.
- No aparece ningún error en la consola de Chrome Dev Tools.
- Todo el html, css y las imágenes están en el DOM. Pero no se renderizan.
Se que hay cosas hardcodeadas y demás pero me llama la atención el comportamiento.
Dejo el codigo de los componentes y el repositorio en git hub. https://github.com/arielestebansoto/nocommerce/tree/bug-carousel
CarouselHome.jsx
import React from 'react'
import '../assets/styles/components/CarouselHome.scss'
import carousel1 from '../assets/pictures/img/carouselhome/carousel-1.png'
import carousel2 from '../assets/pictures/img/carouselhome/carousel-2.png'
import carousel3 from '../assets/pictures/img/carouselhome/carousel-3.png'
import carousel4 from '../assets/pictures/img/carouselhome/carousel-4.png'
import carousel5 from '../assets/pictures/img/carouselhome/carousel-5.png'
class CarouselHome extends React.Component {
constructor() {
super()
}
componentDidMount() {
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.CarouselHome');
var instances = M.Carousel.init(elems, {
fullWidth: true,
indicators: true,
});
});
}
render() {
return (
<div className="carousel CarouselHome carousel-slider">
<a className="carousel-item Carousel-item " href="#1"><img src={carousel1} /></a>
<a className="carousel-item Carousel-item" href="#2"><img src={carousel2} /></a>
<a className="carousel-item Carousel-item" href="#3"><img src={carousel3} /></a>
<a className="carousel-item Carousel-item" href="#4"><img src={carousel4} /></a>
<a className="carousel-item Carousel-item" href="#5"><img src={carousel5} /></a>
<a className="carousel-item Carousel-item" href="#6"><img src={carousel3} /></a>
</div>
)
}
}
export default CarouselHome
Home.jsx
import React from 'react'
import CarouselHome from '../components/CarouselHome'
import CarouselProducts from '../components/CarouselProducts'
import CardProduct from '../components/CardProduct'
import Footer from '../components/Footer'
const Home = () =>
(
<div>
<CarouselHome />
<CarouselProducts>
<CardProduct />
<CardProduct />
<CardProduct />
<CardProduct />
<CardProduct />
</CarouselProducts>
<Footer />
</div>
)
export default Home
App.js
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import '../assets/styles/global.scss'
import 'materialize-css/dist/css/materialize.css'
import "materialize-css/dist/js/materialize.js";
import Home from '../pages/Home'
import Login from '../pages/Login'
import Product from '../pages/Product'
import Payment from '../pages/Payment'
import ShoppingCart from '../pages/ShoppingCart'
import ShippingDetails from '../pages/ShippingDetails'
import Success from '../pages/Success'
import Register from '../pages/Register'
import Header from '../components/Header'
const App = () => {
return (
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/product" component={Product}/>
<Route exact path="/payment" component={Payment}/>
<Route exact path="/shoppingcart" component={ShoppingCart}/>
<Route exact path="/shippingdetails" component={ShippingDetails}/>
<Route exact path="/success" component={Success}/>
<Route exact path="/register" component={Register}/>
</Switch>
</BrowserRouter>
)
}
export default App
index.js
import React from 'react'
import { render } from 'react-dom'
import App from './container/App'
render(<App />, document.getElementById('app'))
App
¿En dónde se incluye acarrouselHome
en laApp
? Saludos