Dynami c Pagination: Как получить размеры элементов, передаваемых в массиве, в другой компонент в React

Question

Я пытаюсь построить динамический c компонент разбиения на страницы в реакции, и я застрял, получая размер элементов, которые я передал компоненту в массиве.

Итак, у меня есть компонент, который принимает массив страниц объектов [любой], где вы можете поместить различные элементы, такие как span, div-контейнер или даже компоненты.

В компоненте я теперь пытаюсь получить высоту каждого элемента массива pages [any].

Я пытался отобразить массив, оборачивая каждый элемент в div и получая к нему доступ. значение через useRef, который я пытался войти в консоль. Я всегда получаю неопределенное значение, и я могу думать, что это потому, что этот обернутый элемент не отображается в данный момент. размеры элементов и размещают их соответственно на отдельных страницах.

Код:

  // inside Pagination.tsx
  const wrapRef = React.useRef(null);

  const calculateElementSizesForPages = () => {
    props.pages.map((item, key) => {
      const wrapItem = <div ref={wrapRef}>{item}</div>;
      console.log(
        "item no: " + key + " and height: " +
        ((wrapItem as unknown) as HTMLDivElement).clientHeight
    );
});
};

// inside PaginationExample.tsx (example using Pagination)
     <Pagination
       pages={[
          <div>
            <Text text="hi page 1"></Text>
            <Text text="hi page 1"></Text>
            <Text text="hi page 1"></Text>
            <Text text="hi page 1"></Text>
          </div>,
          <span>hi from page 2</span>,
          <div>content on site 3</div>]}
        />