React에서 드래그 가능한 캐 러셀 슬라이더를 작업 중이며 포함 된 하위 요소의 수를 기반으로 포함하는 div의 총 너비를 계산하는 방법을 알아 내려고합니다. 구성 요소가 마운트 된 후 너비를 얻을 수 있다고 가정했지만 예상 한 결과를 반환하지 않았습니다 ... 이제 이미지가로드되고 마운트 될 때까지 기다려야한다고 가정합니다. 너비를 얻는 가장 좋은 방법은 무엇입니까 <div className="carousel__stage">?
const Carousel = () => {
const carouselStage = useRef(null);
useEffect ( () => {
console.log(carouselStage.scrollWidth);
}, [carouselStage]);
return (
<div className="carousel">
<div ref={carouselStage} className="carousel__stage">
<Picture />
<Picture />
<Picture />
<Picture />
<Picture />
</div>
</div>
);
}
각 사진에 콜백 함수를 전달하고 useState 후크를 사용하여 총 너비를 계산합니다.
const [width, setWidth] = useState(200); //default width
const handleImageLoaded = (size) =>{
setWidth(width + size)
}
ref를 사용하여 이미했던 것처럼 이미지의 너비를 가져 와서 콜백 함수에 전달합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다