首页 > 其他分享 >react 的拖动面板SplitPane的使用

react 的拖动面板SplitPane的使用

时间:2024-04-18 14:56:07浏览次数:19  
标签:npm ERR 拖动 SplitPane react leftPanel pane 面板

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

相关文章

  • react 使用effect 的报错
    1、像这种,根据someId值的改变,每次调用一次useEffect的。如果在useEffect加上async则会出现报错 正确的做法,则是去掉useEffect上的async useEffect(()=>{asyncfunctionfetchData(){try{//在这里进行异步操作constresponse=awaitMyAPI.g......
  • React 简单登录平台Demo(0):环境配置
    目录前言Create-react-app环境配置文件路径添加组件添加tailWindcss文件tailwind.config.js添加compilecss目标常见错误添加路由简单路由添加复杂路由添加LoginPageMainPagerouter.js总结前言这次用React简单写一个登录网页的DemoCreate-react-app环境配置create-react-app......
  • React 添加常用通用框架
    目录前言React第三方库使用ant-design安装推荐使用react-icons:icon库安装简单使用react-router:React路由添加TailwindCSS:html通用组件TailwindCSS安装yesicon中文Icon网daisyuiEchart+echarts-for-react总结前言今天来写一个简单的后台管理页面,没有后端接口,都是模拟的数......
  • 小程序上是实现拖动悬浮图标
    小程序上是实现拖动图标效果index.wxml<view><viewclass="move-box"catchtouchmove="buttonMove"bindtouchstart="buttonStart"style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">悬浮图标......
  • Qt实现遮罩效果并可以拖动伸缩
    qml实现遮罩实现遮罩容易,但是如果可以任意拖动就需要动动脑子了,在经过大神的提示后,根据截图的界面思考,可以由五个矩形来实现(一个中心矩形和四个锚定在四周的矩形,它们一起充满程序窗口区域)QGraphicsView实现遮罩由于没有qml锚定布局,模拟锚定费时间,需要换一种思路,还是截图的灵感,......
  • React性能优化手册
    此文章属于笔记总结。对应的课程地址:https://www.pluralsight.com/courses/react-performance-playbook相关网站:https://web.developers.google.cn/?hl=zh-cn性能审查检测指标CoreWebvitals:衡量网站是否运行正常的基本指标LCP,LargestContentfulPaint最大内容绘制......
  • React 学习笔记:刚开始接触
    目录前言相关链接个人对React和Vue的初步感觉React和Vue官方态度的区别ReactVue新建第一个React项目复制官方的文档代码教程:井字棋游戏React个人使用体验返回html修改样式作用域React的常用组件ReactDeveloperToolsReact开发工具React框架推荐总结前言之前有断断续续学过一段......
  • react组件地狱是什么怎么解决
    React中的“组件地狱”主要指的是在组件开发中,由于组件的过度嵌套或复杂的层次结构,导致代码变得难以阅读、理解和维护。这通常发生在开发者为了复用逻辑或状态而在组件中层层嵌套其他组件时。在使用高阶组件(HOC)或渲染属性(renderprops)时,如果不加以控制,很容易形成嵌套层级过深的组......
  • React 中的 useRef 与 useState
    React是一个流行的JavaScript库,用于构建用户界面。它提供了几个钩子,使开发人员能够管理状态并执行副作用。React中两个常用的钩子是 useRef 和 useState 。虽然它们乍一看似乎很相似,但它们具有不同的目的并且具有不同的用例。在本文中,我们将深入探讨 useRef 和 useSta......
  • React前端技术深度解析与实践
    React作为当今最热门的前端技术之一,以其组件化、高效性和灵活性等特点赢得了广大开发者的青睐。本文将深入探讨React前端技术的核心原理、实践技巧以及未来的发展趋势,帮助读者更好地理解和应用React。一、React的核心原理React的核心原理是组件化开发。组件是React应用的基本构......