时间戳

首页 > 解决方案 > 如何在 React 中调整 div 表的大小？

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

问题描述

我是 React 的新手。我试图以buttonBar + tables50-50 的比例在网页（顶部和底部）中放置两个。但是，我想通过拖动来调整它们的大小。如何将 'buttonBar' 和 'table' 分组为组件并使它们像 resizable div. 是否有任何图书馆可以使用或可以通过htmland完成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>

标签： htmljquerycssreactjs

解决方案

这是您可以尝试的快速方法。把你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>

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

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

推荐阅读