react表格滚动条锁定底部技巧
本文介绍如何在React应用中实现表格滚动条始终停留在底部。 核心方法是动态调整元素的scrollTop属性。
利用ref动态控制scrollTop
通过createRef创建ref，获取表格元素，并在组件挂载后（componentDidMount或useEffect）设置其scrollTop属性为最大值，从而将滚动条置于底部。 需要注意的是，直接设置一个很大的数值（例如10000）并非最佳实践，因为这依赖于表格内容的高度。 更可靠的方法是使用scrollHeight属性。
示例代码 (使用useEffect):
<code class="javascript">import React, { useEffect, useRef } from 'react';
function MyTable() {
const tableRef = useRef(null);
useEffect(() => {
if (tableRef.current) {
tableRef.current.scrollTop = tableRef.current.scrollHeight;
}
}, [/* 依赖项，根据需要添加，例如表格数据更新 */]);
return (
<table>
<tbody ref={tableRef}>
{/* 表格内容 */}
</tbody>
</table>
);
}
export default MyTable;</code>
此代码会在每次渲染后（或指定依赖项变化后）更新scrollTop，确保滚动条始终位于底部。 请根据你的表格数据更新逻辑调整useEffect中的依赖项数组。
数组合并方法
此外，文中还提到了数组合并的两种常用方法：展开运算符和concat方法。 这两种方法都能高效地合并两个数组。
示例代码：
<code class="javascript">const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; // 展开运算符 const newArr1 = [...arr1, ...arr2]; // 结果：[1, 2, 3, 4, 5, 6] // concat 方法 const newArr2 = arr1.concat(arr2); // 结果：[1, 2, 3, 4, 5, 6]</code>
两种方法效果相同，选择哪种方法取决于个人偏好和代码风格。
