akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.62k stars 2.09k forks source link

Get offsetWidth of element in slick-track #2381

Open pluderes opened 2 weeks ago

pluderes commented 2 weeks ago

Guidelines for posting a new issue

I wanna get width of the first elem in slick-track. It oke in local but not working in env product when I resize window to mobile (for web) and mobile device

Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') at HorizontalCarouselComponent.tsx:52:69 at Bm (react-dom.production.min.js:244:332) at Oc (react-dom.production.min.js:286:111) at q$ (react-dom.production.min.js:283:409) at ml (react-dom.production.min.js:281:398) at U0 (react-dom.production.min.js:273:439) at Xs (react-dom.production.min.js:127:105) at react-dom.production.min.js:267:273 And this is my code

  const slideRef = useRef<any>(null)

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
    if (slideRef.current && isMobile) {
      setWidthSlider(
        Number(
          slideRef.current.innerSlider.track.node.firstElementChild.offsetWidth // get width of the first elem in list slider
        )
      )
    }
  }, [slideRef.current, window.innerWidth, isMobile])

  <Slider
    ref={slideRef}
    {...defaultSettings}
    {...settings}
    slidesToShow={slideShow}
    afterChange={(currentSlide: number) => {
      setCurrentIndex(currentSlide)
    }}
  >
    {children}
  </Slider>