左右布局下，React中拖拽改变两个Box大小的解决方案，使用react-resizable实现

zeeeeeeh

已于 2024-06-12 18:00:38 修改

阅读量887

点赞数 10

文章标签：前端 react.js javascript npm

于 2024-06-12 17:51:05 首次发布

本文链接：https://blog.csdn.net/onetortoise/article/details/139625906

版权

背景介绍：

我们常常需要实现通过拖拽拖动条来改变页面布局的情况，这篇文章介绍通过react-resizable包来实现改变左右盒子的宽度。

效果展示：

我们可以通过拖拽中间的拖动条来改变左右盒子的宽度。

代码实现:

前提准备：

首先需要导入`react-resizable`组件

npm方式导入

npm install react-resizable

yarn方式导入

yarn add react-resizable

1. React函数式组件：

import React, { useState, useRef, useEffect } from 'react';
import { Resizable, ResizableBox} from 'react-resizable';
import './less/common.less';
export default function (props) {

  const containerRef = useRef(null); //存储盒子的Ref
  const [leftWidth, setLeftWidth] = useState(200); //设置左边盒子的宽度
  const [rightWi