通過在 React 中拖動邊框而不是角來調整 div 寬度 JavaScript

Question

我正在研究我的 React 項目中的一個功能，用戶將鼠標懸停在 div 的右邊框或左邊框上，它可能包含圖像或僅文本或任何東西，邊框上會出現一個調整大小按鈕，同時拖動鼠標將相應地調整 div 寬度及其內容。

我嘗試了 CSS Property Resize 但它只允許我從一個角落拖動。 我想通過拖動邊框來調整 div 寬度

.container{
  background-color: black;
  width: 400px;
  height: 400px;
}

.resizable{
  background-color: lightgray;
  width: 300px;
  height: 400px;
  resize: both;
  overflow: auto;
  min-width: 200px;
  min-height: 200px;
  max-width: 350px;
  max-height: 400px;
}

<div class="container" >
  <div class="resizable">
    <p>Resizable Panel</p>
     
  </div>
</div>

我找到的答案很少，但所有答案都包含 JQuery。我正在尋找一個純粹的 Reactjs 解決方案。 請不要讓我失望並告訴我沒有辦法實現這一目標。 我沒有在 w3.org 上找到足夠的信息，但我仍然對此抱有希望。

Answer 1

有一種方法可以實現這一目標。
您可以搜索某人已經創建的 React 組件（例如react-resizable ）。 你只需要擺弄 css styles 來滿足你的需要。
此外，您始終可以嘗試編寫自己的可重用自定義組件，這是一個很好的起點