React 快速实现拖拽改变容器宽高度

一、前言

有时我们需要对一个容器的宽高度进行动态的修改，
最简单直接的方法一般为：用户可以拖拽容器的边缘来改变其大小，例如下面这样的效果：
在这里插入图片描述

在react中，我们可以使用re-resizable这个三方库来快速的实现上面的效果。

二、re-resizable使用讲解

首先在我们的项目中安装re-resizable:

# 使用npm
npm install --save re-resizable
# 使用yarn
yarn add re-resizable

然后使用下面的代码就可以实现刚刚的效果了：

import { Resizable } from 're-resizable';

export default function Demo() {
  return (
    <Resizable defaultSize={{ width: 300, height: 300 }} style={{ margin: 30 }}>
      <div style={{ backgroundColor: 'blue', width: '100%', height: '100%' }}></div>
    </Resizable>
  );
}

re-resizable提供了许多的参数和事件：
在这里插入图片描述

更多参数说明可以访问官方仓库中查看，这里不再赘述。

三、更复杂的使用

有时候我们会遇到的需求会复杂一些，例如：总宽度是固定的，改变一个容器的宽度，其他容器的宽度会自动增大或减小。

如下图所示，有两个并排排列，颜色不同的容器，拖拽蓝色容器的右边缘可动态改变二者的宽度：

在这里插入图片描述
实现的上述效果也很简单，re-resizable提供了onResize方法给我们，在我们调整宽度时，会输出其容器改变后的的位置信息：

输出如下：

在这里插入图片描述

所以我们可以利用该方法，将改变了多少宽度值放在state中，然后再红色容器的宽度设置中，减去该值就可以实现上述的效果了。

完整代码如下：

import { Resizable } from 're-resizable';
import { useState } from 'react';

export default function Demo() {
  const [w, setW] = useState<number>(0);
  return (
li    <div style={{ display: 'flex', margin: 30 }}>
      <Resizable defaultSize={{ width: 400, height: 300 }} maxWidth={700} onResize={(e: any) => setW(e.x - 400)}>
        <div style={{ backgroundColor: 'blue', width: '100%', height: '100%' }}></div>
      </Resizable>
      <div style={{ backgroundColor: 'red', width: `calc(400px - ${w}px)`, height: 300 }}></div>
    </div>
  );
}