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