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

Question

我是 React 的新手。 我试图在 web 页面（顶部和底部）中以 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，因此您可以使用库react-resizable来调整 div 的大小。 也检查示例。

<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>

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

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