1、我刚开始,是准备使用npm install react-split-pane 来引入的。
但是引入的过程报错了
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] 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 [email protected] 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参数,分隔条可以无限,往右滑动。
标签:npm,ERR,拖动,SplitPane,react,leftPanel,pane,面板 From: https://www.cnblogs.com/wwssgg/p/18143495