react如何实时（页面尺寸变化和数据源变化）获取循环map生成的dom节点的clientHeight？

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

类似这种当tags数量过多，父元素展示不全的情况下要生成更多按钮，现在就是要解决页面宽度变化和数据源变化动态控制更多按钮显示隐藏

是要这样吗？(不能上传太大的图片，有点糊将就看吧)

import React, { useState, useRef, useEffect, useCallback } from "react";
import "./index.less";
export default (props) => {
  const wrapRef = useRef(null);
  const [list, setList] = useState([
    { key: "1", name: "电商" },
    { key: "2", name: "教育培训" },
    { key: "3", name: "餐饮美食" },
    { key: "4", name: "地产房产" },
    { key: "5", name: "家具家装" },
    { key: "6", name: "数码电器" },
    { key: "7", name: "个护美妆" },
    { key: "8", name: "服饰鞋包" },
    { key: "9", name: "医保保健" },
    { key: "10", name: "母婴亲子" },
    { key: "11", name: "汽车用品" },
    { key: "12", name: "珠宝配饰" },
  ]);
  const [visible, setVisible] = useState(false);

  const cb = useCallback(() => {
    if (wrapRef.current) {
      const h = wrapRef.current?.offsetHeight;
      // 假设素材标签容器固定高度为100
      if (h > 100) {
        setVisible(true);
      } else {
        setVisible(false);
      }
      console.log(wrapRef.current?.offsetHeight);
    }
  }, []);

  const addItem = () => {
    setList([...list, { key: `${Date.now()}`, name: "哈哈哈" + list.length }]);
  };

  const deleteItem = (e) => {
    const target = e.target;
    const key = target.dataset?.key;
    if (key) {
      setList(list.filter((item) => item.key !== key));
    }
  };

  useEffect(() => {
    window.addEventListener("resize", cb);
    return () => {
      window.removeEventListener("resize", cb);
    };
  }, []);

  useEffect(() => {
    cb();
  }, [list]);

  return (
    <article>
      <header>素材标签：</header>
      <section onClick={deleteItem}>
        <div ref={wrapRef}>
          {list.map((item) => {
            return (
              <span key={item.key}>
                {item.name}
                <i data-key={item.key}>X</i>
              </span>
            );
          })}
        </div>
      </section>
      <footer>
        <span onClick={addItem}>+</span>
        {visible && <strong>. . .</strong>}
      </footer>
    </article>
  );
};

article {
  display: flex;
  height: 100px;
  background-color: pink;
  header {
    width: 100px;
    text-align: right;
  }
  section {
    flex: 1;
    height: 100%;
    background-color: orange;
    overflow: hidden;
    span {
      display: inline-block;
      min-width: 100px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      border-radius: 20px;
      background-color: skyblue;
      margin: 0 10px 10px 0;
      color: white;
      text-align: center;
      i {
        color: red;
        cursor: pointer;
      }
    }
  }
  footer {
    width: 150px;
    display: flex;
    span {
      height: 30px;
      width: 30px;
      text-align: center;
      line-height: 26px;
      font-weight: bold;
      font-size: 24px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }
    strong {
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}

要实时获取可以写一个每几秒请求一次的定时器 setinterval这个

这个可以使用监听属性控制，不过效果不理想，最好和需求确认一下可以在固定位置显示不同的模块，超出部分隐藏或者滚动，也可以用锚点

你应该是想监听屏幕大小做适配

window.onresize = () =>{}

open Webapi.Dom;

ref
  -> React.Ref.current
  -> Js.Nullable.toOption
  -> Belt.Option.map(Element.clientHeight);