简介
@pbackup/re-resizable 是一个React组件库，它提供了一个可重置大小的div元素，能够将div元素变得可以拖动，实现自适应的布局效果。这个库非常方便，能够大大提高我们的开发效率，现在我就为大家讲一下它的安装和使用方法。
安装
在终端输入以下命令进行安装：
npm install @pbackup/re-resizable --save
如果使用yarn，则输入以下命令进行安装：
yarn add @pbackup/re-resizable
使用
使用 @pbackup/re-resizable 需要先导入它。在代码中我们可以这样导入：
import ResizableBox from '@pbackup/re-resizable';
然后，我们就可以创建一个可重置大小的div元素了：
<ResizableBox width={200} height={200}>
<div>Resizable Box</div>
</ResizableBox>这个ResizableBox有两个必填的属性，分别是宽和高。它们的值可以是number类型（代表像素），也可以是百分数类型。而作为子元素的div可以随意，里面写任何想要展示的内容。
除了宽高以外，ResizableBox还有各种其他的属性，例如：
-- -------------------- ---- ------- ------------- ----------- ------------ -------------- --------------- -------------- --------------- ----------- ---------------- ---- ---------------------- - -------------- --------- ---------------
- minWidth 和 minHeight 以及 maxWidth 和 maxHeight 分别代表元素的最小值和最大值。如果不设置的话，元素的大小将没有限制。
- axis 属性用来控制元素的拖动方向。"x" 表示只能水平拖动，"y" 表示只能垂直拖动，"both" 表示可以随意拖动。
- handleSize 代表边框的大小，它是一个数组，分别代表边框宽度和高度。
- lockAspectRatio 表示是否锁定元素的宽高比。如果设置为 true，那么在拖动时宽高比会保持不变。
更多的属性可以参考官方文档：https://github.com/bokuweb/re-resizable
示例代码
下面是一个完整的示例代码，可以将其添加到你的项目中，观察效果并修改属性：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ ------------ ---- ------------------------
-------- ----- -
----- ------- --------- - --------------
----- -------- ---------- - --------------
------ -
-------------
-------------
---------------
----------------- ----- -- -
---------------------
-----------------------
--
-------------
--------------
--------------
---------------
-----------
---------------- ----
----------------------
-
-------------- ---------
---------------
--
-
------ ------- ----这个示例代码中，我们使用了 useState 来绑定元素的宽和高，每次改变大小时会触发 onResizeStop 事件，重新设定宽和高的值。同时我们也针对这个元素设置了最小值和最大值，并锁定了宽高比。这样无论怎样拖动，元素都不会变形。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f7277583971