react 的拖动面板SplitPane的使用

1、我刚开始，是准备使用npm install react-split-pane 来引入的。

但是引入的过程报错了

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: active-workspace@6.0.7   
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project   
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-0" from react-split-pane@0.1.92
npm ERR! node_modules/react-split-pane
npm ERR!   react-split-pane@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\2307030006\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\2307030006\AppData\Local\npm-cache\_logs\2024-04-12T01_22_45_875Z-debug-0.log

　　原来是我的react 项目，采用的react版本是18.2.0。但是react-split-pane 使用的react 版本是16.0.0.0 的。react 版本不匹配导致。

 

2、后面采用了另外的形式。直接将react-split-pane 项目的代码，放到自己本地的代码中。（注意：记得把github代码的一些CSS样式也拿下来）

 

3、使用

const MyLayout4 = () => {
  const [showRightPane, setShowRightPane] = useState(true); // 默认显示右侧面板

  const toggleRightPane = () => {
    setShowRightPane(!showRightPane);

    
    // 如果右侧面板隐藏，则调整左侧面板大小为100%
    if (showRightPane ) {
      const leftPanel = document.getElementById('leftPanel') 
      let width = leftPanel.style.width
      leftPanel.style.width = '100%'
      width = leftPanel.style.width
    }else{
      const leftPanel = document.getElementById('leftPanel') 
      leftPanel.style.width = '50%'

    }
  };

  // 左侧面板的宽度，根据右侧面板的显示状态来确定
  const leftPaneWidth = showRightPane ? '50%' : '100%';

  return (
    <Layout style={{ height: '100vh' }}>
      <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
        <SplitPane
          split="vertical"
          defaultSize={leftPaneWidth}
          maxSize={1000}
          // 根据右侧面板的显示状态来决定是否允许拖动调整大小
        >
          <div style={{ height: '100%', backgroundColor: 'lightblue' }} >Left pane</div>
          {showRightPane && (
            <div style={{ height: '100%', backgroundColor: 'lightgreen' }}>Right pane</div>
          )}
        </SplitPane>
        <Button onClick={toggleRightPane}>
          {showRightPane ? '隐藏右侧面板' : '显示右侧面板'}
        </Button>
      </div>
    </Layout>
  );
}

　　

这个是不能直接用的，因为我这边的特殊要求，需要增加一个按钮来隐藏右边面吧，在隐藏右边面板时，左边面板占满。

这些都是原生功能不支持的。

关键就是把leftPanel这个ID，放到react-split-pane 原生额代码中

 给div添加了id。

 

 

注意：如果不设置maxSize参数，分隔条可以无限，往右滑动。