React MUI V5实现：child1换行/高度变化时切换child2的flex-direction

核心思路 #

MUI的断点是基于视口宽度的固定阈值，没法直接适配元素自身的内容换行/高度变化场景。这里需要用ResizeObserver API监听目标元素（child1）的尺寸变化，动态调整child2的flex布局方向。

实现代码 #

import React, { useState, useEffect, useRef } from 'react';
import { Box } from '@mui/material';

const DynamicLayout = () => {
  const [flexDirection, setFlexDirection] = useState('row');
  const child1Ref = useRef(null);
  // 存储child1的初始高度，用于判断是否换行
  const initialHeightRef = useRef(null);

  useEffect(() => {
    const child1 = child1Ref.current;
    if (!child1) return;

    // 记录初始高度
    initialHeightRef.current = child1.offsetHeight;

    const observer = new ResizeObserver((entries) => {
      const { offsetHeight } = entries[0].target;
      // 当高度超过初始值，判定为内容换行，切换布局
      if (offsetHeight > initialHeightRef.current) {
        setFlexDirection('column');
      } else {
        setFlexDirection('row');
      }
    });

    observer.observe(child1);

    // 清理监听，避免内存泄漏
    return () => observer.disconnect();
  }, []);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      {/* child1：需要监听的前置元素 */}
      <Box ref={child1Ref} sx={{ whiteSpace: 'normal', width: '200px' }}>
        这里是可能会换行的内容，当内容长度超过容器宽度时，高度会变化
      </Box>
      {/* child2：根据child1状态切换布局的元素 */}
      <Box 
        sx={{ 
          display: 'flex', 
          flexDirection: flexDirection, 
          gap: 1,
          backgroundColor: '#f0f0f0',
          padding: 1
        }}
      >
        <Box>元素A</Box>
        <Box>元素B</Box>
        <Box>元素C</Box>
      </Box>
    </Box>
  );
};

export default DynamicLayout;

关键细节说明 #

• ResizeObserver监听：实时捕捉child1的尺寸变化，比监听窗口resize更精准，因为元素高度变化可能和视口无关（比如内容动态更新）。
• 初始高度对比：通过初始高度判断是否换行，也可以根据需求调整判断逻辑（比如直接对比scrollHeight和offsetHeight，判断是否有溢出换行）。
• MUI组件适配：用Box组件替代原生div，通过sx属性动态设置flexDirection，完全贴合MUI的样式体系。
• 内存泄漏防护：在useEffect的清理函数中销毁ResizeObserver，避免组件卸载后残留监听。

扩展场景优化 #

如果child1的内容是动态加载的，需要在内容更新后重新获取初始高度，可以把监听逻辑抽成自定义hooks，或者在内容更新时重置initialHeightRef.current的值。

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