Здраствуйте. Мне нужно получить ширину элемента в переменной
sliderItems и отправить эту ширину в компонент
Arrow. Я с помощью
setSliderItemsArr внутри
useEffect изменяю состояние
sliderItemsArr. После этого пытаюсь получить дочерние элементы
worksGroupRef.current.children и возникает проблема, при получении дочерних элементов возвращается
undefined. Как я понял с мучениями
console.log это из за того, что состояние
sliderItemsArr изменяется после завершения кода в
useEffect. Как мне быть если
worksGroupRef.current.children возвращает undefined? Проблемное место я обозначил /////////////////////////////////////.
import { cloneElement, useEffect, useRef, useState } from "react";
export default function Group({ data }) {
let itemWidth = 0;
let groupGap = 0;
const sliderItems = data.map((el, index) => {
return <Item element={el} key={el.id} elemIndex={index} />;
});
const [sliderPosition, setSliderPosition] = useState(0);
const [groupData, setGrouData] = useState([itemWidth, groupGap]);
const [sliderItemsArr, setSliderItemsArr] = useState([]);
const worksGroupRef = useRef();
useEffect(() => {
setSliderItemsArr([
cloneElement(sliderItems[sliderItems.length - 1]),
...sliderItems,
cloneElement(sliderItems[0]),
]);
//////////////////////////////////////////////////////
const sliderGroup = worksGroupRef.current;
setGrouData(
sliderGroup.children[0].offsetWidth +
+window.getComputedStyle(sliderGroup ).columnGap.replace("px", "")
);
//////////////////////////////////////////////////////
}, []);
return (
<div className="works-block-group__wrapper">
<Arrow
direction="left"
onClick={setSliderPosition}
groupData={groupData}
/>
<ul
className="works-block__group"
ref={worksGroupRef}
style={{ transform: `translateX(${sliderPosition}px)` }}
>
{sliderItemsArr}
</ul>
<Arrow
direction="right"
onClick={setSliderPosition}
groupData={groupData}
/>
</div>
);
}
Простой
