React-Grid-Layout中ResponsiveGridLayout无法渲染传入子组件问题

问题根源拆解 #

1. 子元素与布局未绑定：ResponsiveGridLayout要求每个子组件必须通过key、id或data-grid属性，与layouts配置中的i字段一一对应，否则组件无法匹配布局规则，会被默认隐藏。
2. 冗余子元素干扰：代码里的<h1>Hola</h1>没有在defaultLayouts中定义对应的布局项，打乱了布局渲染逻辑。
3. LocalStorage旧缓存冲突：之前存在localStorage的布局数据可能和当前组件结构不匹配，导致渲染异常。

分步修复方案 #

1. 给子组件绑定布局标识 #

修改PrototypePage.jsx，移除无布局的<h1>（或给它添加对应的布局项），同时确保每个Portlet的key与layouts中的i一致：

import PrototypeComponent from "./PrototypeComponent";
import Portlet from "./Portlet";

const PrototypePage = () => {
  return (
    <>
      <PrototypeComponent>
        <Portlet key="1" id="1" title="Portlet 1" src="https://www.example.com" />
        <Portlet key="2" id="2" title="Portlet 2" src="https://www.example.com" />
        <Portlet key="3" id="3" title="Portlet 3" src="https://www.example.com" />
      </PrototypeComponent>
    </>
  );
};

export default PrototypePage;

如果Portlet是自定义组件，需要把id传递到根元素的data-grid属性中：

// Portlet.jsx 示例实现
export default function Portlet({ id, title, src }) {
  return (
    <div data-grid={{ i: id }} className="portlet">
      <div className="handle">{title}</div>
      {/* 组件内部内容 */}
    </div>
  );
}

2. 清理LocalStorage缓存 #

打开浏览器F12开发者工具 → 切换到Application标签 → 找到LocalStorage，删除my_layouts和my_breakpoint两条记录，避免旧缓存影响新布局。

3. 优化断点切换逻辑 #

原代码中切换断点时直接复制原布局，可能导致列数不匹配的问题，修改handleBreakpointChange函数，按比例适配布局宽度：

const handleBreakpointChange = (breakpoint) => {
  setLayouts((prevLayouts) => {
    if (!prevLayouts[breakpoint] || prevLayouts[breakpoint].length === 0) {
      const newCols = cols[breakpoint];
      const originalLayout = prevLayouts[currentBreakpoint] || defaultLayouts.lg;
      // 按新断点列数比例调整组件宽度
      const adaptedLayout = originalLayout.map(item => ({
        ...item,
        w: Math.round((item.w / cols[currentBreakpoint]) * newCols)
      }));
      return {
        ...prevLayouts,
        [breakpoint]: adaptedLayout
      };
    }
    return prevLayouts;
  });
  setCurrentBreakpoint(breakpoint);
  localStorage.setItem(BREAKPOINT_KEY, breakpoint);
};

4. 升级库版本（可选） #

如果使用的是较旧版本的react-grid-layout（如v1.3.0之前），可能存在Responsive组件的渲染bug，建议升级到最新稳定版：

npm update react-grid-layout
# 或 yarn 用户执行
yarn upgrade react-grid-layout

验证效果 #

完成以上修改后，重启开发服务器，页面应该能正常渲染三个可拖拽、缩放的Portlet组件。

内容的提问来源于stack exchange，提问作者Mario De Pablo Damian