React子组件随父组件（窗口resize）重渲染问题求助

核心问题在于你当前的useEffect只在组件首次挂载时执行一次，窗口resize或者父组件尺寸变化时，不会重新获取容器的最新尺寸，导致子组件接收的height属性无法更新。

解决方案 #

• 给窗口添加resize事件监听，每次尺寸变化时重新计算容器尺寸
• 在组件卸载时移除监听，避免内存泄漏
• 可选：如果父组件尺寸变化不是由窗口resize触发（比如内部元素动态变化），用ResizeObserver监听容器本身的尺寸变化会更精准

修改后的代码 #

export default function ThisIsAReactComponent(props) {
  const refContainer = useRef();
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
  });

  // 缓存函数执行结果，避免重复计算
  const functionResult = useMemo(() => aFunction(props.table)[0], [props.table]);

  const updateDimensions = () => {
    if (refContainer.current) {
      setDimensions({
        width: refContainer.current.offsetWidth,
        height: refContainer.current.offsetHeight,
      });
    }
  };

  useEffect(() => {
    // 首次渲染获取初始尺寸
    updateDimensions();
    // 绑定窗口resize监听
    window.addEventListener('resize', updateDimensions);
    
    // 组件卸载时清理监听
    return () => {
      window.removeEventListener('resize', updateDimensions);
    };
  }, []);

  // 可选：用ResizeObserver监听容器自身尺寸变化（适配非窗口resize导致的尺寸变更）
  useEffect(() => {
    if (!refContainer.current) return;
    const observer = new ResizeObserver(updateDimensions);
    observer.observe(refContainer.current);
    
    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <>
      <ThisIsAChildComponent
        table={props.table}
        height={dimensions.height ? dimensions.height - 10 : "100%"}
      />

      <Box ref={refContainer} width="100%" height="100%">
        <ThisIsTheParentComponent
          datas={functionResult.Data}
          records={functionResult.Records}
          heading={"A Heading"}
          pad={2}
          table={props.table}
        />
      </Box>
    </>
  );
}

关键改动说明 #

• 提取updateDimensions函数复用，避免重复代码
• 添加窗口resize事件监听，确保尺寸变化时同步更新子组件的height属性
• 用useMemo缓存aFunction的执行结果，减少不必要的重复计算
• 可选的ResizeObserver可以精准监听容器自身的尺寸变化，覆盖父组件尺寸由内部元素动态调整的场景

内容的提问来源于stack exchange，提问作者Katie Fletcher