如何在 React JS 中创建可调整大小的元素

react jsjavascript libraryfront end technology更新于 2025/11/19 2:20:17

本文将介绍如何在 React JS 中创建可调整大小的元素。我们通常在 HTML 中创建可调整大小的文本区域，但要创建其他可调整大小的元素却似乎是不可能的。在 React 中，我们可以使用一个简单的库轻松创建可调整大小的元素。

示例

首先安装以下包


npm install --save re-resizable

re-resizable 用于导入一个可调整大小的容器，该容器将为任何 DOM 元素添加可调整大小的功能。

在 App.js 中添加以下代码

import React, { useState } from "react";
import { Resizable } from "re-resizable";
export default function App() {
   const [state, setState] = useState({ width: 320, height: 200 });
   return (
      <Resizable
         style={{ marginLeft: 500, marginTop: 200, border: "1px solid black" }}
         size={{ width: state.width, height: state.height }}
         onResizeStop={(e, direction, ref, d) => {
            setState({
               width: state.width + d.width, height: state.height + d.height,});
            }}>
         Sample with size
      </Resizable>
   );
}

解释

在 <Resizable> 内添加任何元素都会使其可调整大小。
size 属性定义了可调整大小组件的大小。
onResizeStop 定义了当用户尝试调整元素大小时要执行的操作。这里，我们在 State 中更改元素的宽度和高度，从而对 size 属性进行相应的更改。
诸如 d.width 和 d.height 之类的参数定义了宽度或高度应该增加或减少多少。