美文网首页
React中使用window.MutationObserver监

React中使用window.MutationObserver监

作者: 懒惰的狮子 | 来源:发表于2023-05-13 09:37 被阅读0次
    
      const containerRef: any = useRef(null) 
      const mutationObserver = () => {
        let MutationObserver = window.MutationObserver  
        const options = { // 配置参数
          attributes: true, // 属性的变动
          characterData: true, //节点内容或节点文本的变动
          subtree: true // 布尔值,表示是否将该观察器应用于该节点的所有后代节点
        }
        const mutation = new MutationObserver((mutationRecoards) => { 
         // Demo发生变化的处理
          if (!containerRef.current) return
          if (containerRef.current.clientHeight > 424) {
            containerRef.current.style.height = "424px"
          }
        })
        mutation.observe(containerRef.current, options); // 开启监听
        // 其他配置参数 
        // childList 子节点的变动(指新增,删除或者更改)
        // attributeOldValue  布尔值,表示观察attributes变动时,是否需要记录变动前的属性值
        // characterDataOldValue 布尔值,表示观察characterData变动时,是否需要记录变动前的值
        // attributeFilter 数组,表示需要观察的特定属性(比如[‘class’,‘src’])
    
    
    

    相关文章

      网友评论

          本文标题:React中使用window.MutationObserver监

          本文链接:https://www.haomeiwen.com/subject/lvvssdtx.html