时间戳

首页 > 解决方案 > 渲染后如何获取表格列宽？

reactjs - 渲染后如何获取表格列宽？

问题描述

我正在尝试在表中制作粘性标题，为了做到这一点，复制了表头并使容器位置相对于表 div 是绝对的。但问题是表格单元格的宽度不一样。我想获取表格中每一列的宽度并设置粘性标题列的宽度以使它们相同。渲染后怎么办？

这是代码结构：

<div className="tableDataContainer">
    <div className="stickyHeader">
        <Table>
            <TableHead></TableHead>
        </Table>
    </div>
    <Table>
        <TableHead></TableHead>
        <TableBody></TableBody>
    </Table>
</div>

标签： reactjs

解决方案

你可以在 React 中使用refprop 和useRefhook 在渲染后获取一个对象的宽度。就像是：

const refElem = React.useRef(0);
...
<button ref={refElem}>This is a button 1</button> //<-- I'm using a button just to make an example

然后访问width只是调用refElem.style.width。

推荐阅读