Split分割面板拖拽后布局错乱怎么办？

巧云 Dev 提问于 2026-03-13 21:42:22 阅读 3

组件

我用的是 Ant Design 的 Split 面板，左右两个区域，设置了 defaultSize 初始比例。但用户拖动分隔条之后，页面一刷新或者重新渲染，布局就完全错位了，右边的内容直接被挤没了。

我试过加 minSize 限制，也试过用 persist 把尺寸存到 localStorage，但有时候还是会出现宽度变成 0 或者负数的情况，控制台也没报错，就是样式崩了。

这是我的组件代码：

<SplitPane split="vertical" defaultSize={300} minSize={200}>
  <div>左侧菜单</div>
  <div>右侧内容区</div>
</SplitPane>

布局组件

我来解答赞 0 收藏

反馈

1 条解答

轩辕志远 Lv1

这个问题很常见，根源在于你用的是 defaultSize，这个属性只在组件首次挂载时生效，之后用户拖拽产生的尺寸变化并没有被持久化，刷新页面后就丢失了。

你试的 persist 可能没完全用对，或者组件版本不支持。正确做法是用受控模式：

import { useState, useEffect } from 'react';

import SplitPane from 'react-split';



function MyComponent() {

  const [size, setSize] = useState(() => {

    const saved = localStorage.getItem('split-size');

    return saved ? JSON.parse(saved) : 300;

  });



  const handleDragEnd = (newSize) => {

    localStorage.setItem('split-size', JSON.stringify(newSize));

  };



  return (

    <SplitPane 

      split="vertical" 

      size={size}

      minSize={200}

      onDragEnd={handleDragEnd}

    >

      <div>左侧菜单</div>

      <div>右侧内容区</div>

    </SplitPane>

  );

}

关键点就是把 defaultSize 改成 size 自己控制状态，加上 onDragEnd 回调保存尺寸。初始化时从 localStorage 读，读不到就用默认值。

关于宽度变 0 或负数的问题，可以在保存前加个校验：

const handleDragEnd = (newSize) => {

  if (newSize > 0 && newSize < window.innerWidth - 200) {

    localStorage.setItem('split-size', JSON.stringify(newSize));

  }

};

这样基本就能解决你遇到的问题了，希望能帮到你。

2026-03-13 22:18