js监听孩子节点的数量:MutationObserver

定义监听方法

 //监测孩子数量
  const mutationObserver = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        setChildrenLength(roomButtonGroupRef.current?.childNodes?.length)
      }
    });
  });

监听及卸载

useEffect(() => {
    //监听
    mutationObserver.observe(roomButtonGroupRef.current, { childList: true });
    // 初始化子节点计数
    setChildrenLength(roomButtonGroupRef.current?.childNodes?.length)
    return () => {
      mutationObserver.disconnect()
    }
  }, [])

 

posted @   SimoonJia  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
历史上的今天:
2022-06-24 moment格式化时间操作(时间戳与字符串相互转化)
2022-06-24 接收值的方法(拷贝)
点击右上角即可分享
微信分享提示