React中使用window.MutationObserver监听Demo变化处理


  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’])


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容