Есть следующий код компонента:
const Gallery = (props) => {
const galleryRef = useRef();
const [galleryDimensions, setGalleryDimensions] = useState({});
useEffect(() => {
setGalleryDimensions({
width: galleryRef.current.offsetWidth,
height: galleryRef.current.offsetHeight,
});
// Строка 1
const ul = galleryRef.current.children;
const ulChildren = ul[0].children;
//
const imgs = galleryRef.current.getElementsByTagName('img');
}, [])
return (
<GalleryContainer ref={galleryRef} >
<ul>
{
srcs.map((imgUrl, ind, array) => (
<GalleryItem key={imgUrl}>
<Img src={imgUrl} />
</GalleryItem>
))
}
</ul>
</GalleryContainer>
);
}
Html структура компонента:
<div>
<ul>
<li>
<img />
</li>
<li>
<img />
</li>
<li>
<img />
</li>
</ul>
</div>
Мне необходимо получить размеры последнего элемента img. Я пытаюсь сделать это через уже определённый ref на GalleryContainer в хуке useEffect.
Вопросы: В строке 1 в useEffect я достаю ul элемент, получаю - HTMLCollection [ul]:
const ul = galleryRef.current.children; // HTMLCollection [ul]
Далее я могу обратиться к нулевому элементу ul[0] и взять у него дочерние элементы:
const ulChildren = ul[0].children; // HTMLCollection []
Почему в этом случае я получаю пустую коллекцию? Если ее развернуть в консоле браузера, то элементы в ней все же есть:
HTMLCollection []0: li.Gallery__GalleryItem-wbytoh-1.crijyy1:
li.Gallery__GalleryItem-wbytoh-1.crijyy2: li.Gallery__GalleryItem-wbytoh-1.crijyy3: li.Gallery__GalleryItem-wbytoh-1.crijyy4: li.Gallery__GalleryItem-wbytoh-1.crijyy5: li.Gallery__GalleryItem-wbytoh-1.crijyy
Но почему то я не могу их достать и перебрать с помощью Array.from.
Я могу пойти другим путем, без промежуточных переборов ul:
const imgs = galleryRef.current.getElementsByTagName('img');
И получу также пустую HTMLCollection [], в которой если раскрыть, будут находиться элементы, но достать я их не могу.