React中如何设置父节点样式？怎么让absolute子元素撑满relative父元素高度

问题1：div绑定onLoad设置父元素背景色不生效的原因 #

div属于普通DOM元素，没有内置的load事件，仅依赖外部资源加载的元素（如img、iframe、script、body等）才支持onLoad触发回调，你绑定的事件代码不会执行，因此背景色设置不生效。

问题2：React场景下让absolute定位子元素撑开relative父元素高度的实现方案 #

absolute定位元素会脱离正常文档流，父元素默认无法感知其高度，需要通过JS读取子元素实际高度后赋值给父元素，具体实现步骤如下：

1. 分别给父、子元素绑定ref用于获取DOM实例
2. 组件挂载后读取子元素的实际高度，赋值给父元素的height属性
3. 如果子元素高度会动态变化，可通过ResizeObserver监听子元素尺寸自动更新父元素高度

基础实现代码 #

import { useRef, useEffect } from 'react';

function AutoHeightContainer() {
  const parentRef = useRef(null);
  const childRef = useRef(null);

  useEffect(() => {
    if (!childRef.current || !parentRef.current) return;
    // 读取子元素实际高度
    const childHeight = childRef.current.offsetHeight;
    // 赋值给父元素
    parentRef.current.style.height = `${childHeight}px`;
    // 你要测试的背景色设置可放在此处验证
    parentRef.current.style.background = 'yellow';
  }, []);

  return (
    <div 
      ref={parentRef} 
      style={{ position: 'relative', width: '100%' }}
    >
      <div 
        ref={childRef} 
        style={{ position: 'absolute', top: 0, left: 0, width: '100%' }}
      >
        {/* 子元素内容，高度可任意设置 */}
        <p>测试行1</p>
        <p>测试行2</p>
        <p>测试行3</p>
      </div>
    </div>
  );
}

动态高度适配实现 #

如果子元素高度会动态变更，可添加ResizeObserver监听实现自动适配：

useEffect(() => {
  if (!childRef.current || !parentRef.current) return;

  const observer = new ResizeObserver(entries => {
    const childHeight = entries[0].contentRect.height;
    parentRef.current.style.height = `${childHeight}px`;
  });

  observer.observe(childRef.current);
  // 组件卸载时销毁监听避免内存泄漏
  return () => observer.disconnect();
}, []);

内容的提问来源于stack exchange，提问作者János