React:调整div的大小,包括处理程序,不同的游标,即ns-resize - 没有jquery

Question

我正在寻找一种简单的方法,允许用户使用句柄和所有相关游标调整div的大小.我看到很多使用jquery的例子,但我想在反应中使用它,并且不需要jquery.

有谁知道这样做的简单方法？我认为纯粹的js,css.我真的不想为此使用react组件,因为我需要在标准div上调整大小.

当然它是与reactjs一起使用的,有没有更现代的方法来做这个没有jquery？

**编辑**

这些是可用于每个可调整大小的点的游标

e-resize ne-resize n-resize nw-resize s-resize se-resize w-resize sw-resize

Answer 1

您只能使用 CSS，resize属性允许您做到这一点！

.resize {
  border: 1px solid black; 
  overflow:auto;
}
.resize.horizontal {
  resize: horizontal;
}
.resize.vertical {
  resize: vertical;
}
.resize.both {
  resize: both;
}
.wrap {
  max-width: 80%;
}

<div class="wrap">
  <div class="resize horizontal">Resize me!</div>
  <div class="resize vertical">Resize me!</div>
  <div class="resize both">Resize me!</div>
</div>

要求

overflow不同于visible(initial) 是必需的，您可以将其应用于溢出设置为auto,scroll和 的所有元素hidden。

我称这个属性太棒了！

Answer 2

这是使用react-resize-panel库的 一个很好的解决方案的例子https://www.npmjs.com/package/react-resize-panel

将您想要显示的任何内容放入div中，您也可以自定义处理程序。

import ResizePanel from "react-resize-panel";

...

<div style={{
  width: '80%',
  height: '500px',
  border: '1px solid black',
  display: 'flex',
  flexDirection: 'column'}}>
  <ResizePanel direction='s' style={{backgroundColor: 'black', height: '50%'}}>
    <div style={{backgroundColor: 'orange', height: '100%'}}>panel</div>
  </ResizePanel>
  <div style={{backgroundColor: 'purple', flexGrow: '1'}}>panel</div>
</div>

...

希望这可以帮助别人