渲染后如何获取表格列宽？答案

【问题标题】：How to get the table column width after render in react?渲染后如何获取表格列宽？
【发布时间】：2021-08-04 08:41:35
【问题描述】：

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

这是代码结构：

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

【问题讨论】：

标签： reactjs

【解决方案1】：

可能有点矫枉过正，但您可以在单元格上使用 ref 并使用 clientWidth 属性或 getBoundingClientRect 方法获取其宽度。

“Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。” - React ref doc

您可以使用createRef 方法（如果您的组件是类组件）或useRef 挂钩（如果您的组件是功能组件）来创建引用。

【讨论】：

【解决方案2】：

你可以在 React 中使用ref prop 和useRef 钩子在渲染后获取一个对象的宽度。比如：

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。

【讨论】：