监听异步生成的元素变化

如何监听异步生成的元素变化

在开发的过程中，可能会遇到以下的情况：异步生产两个元素A和B，但是B需要根据A的高度来判断是否显示。

() =>(
	<div ref={targetElementRef} className={styles.reallyText}>{text}</div>
	<div style={{ display: showElement ? 'block' : 'none' }} onClick={() => setExpand(false)}>
	  <span>{'Expand'}</span>
	  <DownOutlined className={styles.programIcon} />
	</div>
)

无效的检测

因为异步的原因，在这边的targetElementRef.current.clientHeight是获取不到的

useEffect(() => {
    const targetElementHeight = targetElementRef.current.clientHeight;
    // 根据目标元素的高度进行条件判断，这里示例设置高度大于 100 时显示
    setShowElement(targetElementHeight > 100);
  }, []);

正确的检测

使用MutationObserver监听目标元素变化，保证即便是异步也能获取到真正的高度

  useEffect(() => {
    const observeTargetElement = () => {
      if (targetElementRef.current) {
        const targetElementHeight = targetElementRef.current.clientHeight;

        // 根据目标元素的高度进行条件判断，这里示例设置高度大于 100 时显示
        setShowElement(targetElementHeight > 100);
      }
    };

    // 使用MutationObserver监听目标元素变化
    const observer = new MutationObserver(observeTargetElement);
    observer.observe(targetElementRef.current, { attributes: true, childList: true, subtree: true });

    // 清理函数
    return () => observer.disconnect();
  }, [targetElementRef]);