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>

两种方法效果相同，选择哪种方法取决于个人偏好和代码风格。