Очень нужна помощь в понимании, как отслеживать в функциональном компоненте, с учетом всех этапов жизненного цикла, размеры некоторых блоков компонента и уже от этого выстраивать перерисовку компонента.
Есть сетка grid компонента React и мне нужно получать размер одного из элементов этой сетки при изменении его размера. Я использую функциональный тип компонентов, но все никак не могу корректно считать эти значения при изменении окна. Использую useEffect для начального считывания значения элемента - все выходит, но не соображу как правильно отлавливать дальнейшее изменение этого элемента. Вот код компонента:
import './css/mainbanner.css';
import React, { useEffect, useRef } from 'react';
import { REACT_APP_API_URL } from '../../utils/constants';
const MainBanner = () => {
const sliderLine = useRef();
const sliderWrapper = useRef();
const mb = {
'mb': {
list: [
{
title: 'Слайд 1',
descr: 'Описание.',
btn_title: 'Подробнее',
image: 'b-01.jpg',
link: '/',
style: 1
},
{
title: 'Слайд 2',
descr: 'Описание … подходящий под новые размеры.',
btn_title: 'Смотреть сейчас',
image: 'b-02.jpg',
link: '/',
style: 1
},
]
}
}
const resizeSlider = () => {
console.log(sliderWrapper.current.offsetWidth);
}
useEffect(() => {
if (sliderWrapper.current) resizeSlider();
}, []);
return (
<div className="banner-wrapper">
<div className="mb" ref={sliderWrapper}>
<div className="sliderline" ref={sliderLine}>
<div className="slide" style={{ backgroundImage: `url(${REACT_APP_API_URL}banners/b-01.jpg` }}>
Hello world
</div>
<div className="slide" style={{ backgroundImage: `url(${REACT_APP_API_URL}banners/b-02.jpg` }}>
Hello world
</div>
</div>
</div>
<div className="b1"></div>
<div className="b2"></div>
<div className="b3"></div>
<div className="b4"></div>
</div>
);
};
export default MainBanner;