如何在 React 中调整 div 表的大小？

Question

我是 React 新手。我正在尝试以 50-50 的比例在网页（顶部和底部）中放置两个 buttonBar + tables。但是，我想通过拖动来调整它们的大小。如何将“buttonBar”和“table”分组为组件并使它们像可调整大小的div。是否有任何库可以使用或者可以由html 和css 完成？这是我的代码。谢谢！

<div id='buttonBar1'>
  <....lots button......>
</div>
<div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", position:'relative', height:"50vh"}} >
  <Table id={'Table_1'} />
</div>

<div id='buttonBar2'>
  <....lots button......>
</div>
<div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", position:'relative', height:"40vh"}}>
  <Table id={'Table_2'} />
</div>

Answer 1

您可以尝试以下快捷方式。将您的table+buttonBar 放在一个 div 中，这两个 div 都可以放在 container 中。由于您使用的是 React，您可以使用 libraryreact-resizable 来调整 div 的大小。检查example。

<div className="container">
<Resizable axis="y" draggableOpts={resizeHandles: ['s']}>
 <div className="group-one">
  <div id='buttonBar1'>
   <....lots button......>
 </div>
 <div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", 
 position:'relative', height:"50vh"}} >
  <Table id={'Table_1'} />
 </div>
</div>
</Resizable>
<Resizable axis="y" draggableOpts={resizeHandles: ['n']}>
<div className="group-two">

 <div id='buttonBar2'>
   <....lots button......>
 </div>
 <div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", 
 position:'relative', height:"40vh"}}>
   <Table id={'Table_2'} />
 </div>
</Resizable>
</div>
</div>

添加一些样式，使它们分散到整个页面并占用 50-50 间距

.container {
 display: flex;
 flex-direction: column;
}
.group-one, .group-two {
 height: 50%;
}