react表格（antd）触底加载

antd表格监听滚动条触底

import {  useRef } from 'react';
import { Table } from 'antd';
import ReactDOM from 'react-dom';

//用于定义列的类型
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const scrollRef = useRef<any>();

const columns: ColumnsType<DataType> = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  }
];

const data: DataType[] = [];

//生成第一次的数据
for( var i = 0;i < 10;i++){
	data.push({
		    key: i,
		    name: name+i,
		    age: 32,
		    address: 'Sydney No. 1 Lake Park',
		    tags: ['cool', 'teacher'],
	 	 });
}

//用于滚动条触底后重新生成数据
const getData = () = > {
	for( var i = 0;i < 20;i++){
		data.push({
			    key: i,
			    name: name+i,
			    age: 32,
			    address: 'Sydney No. 1 Lake Park',
			    tags: ['cool', 'teacher'],
		 	 });
	}
}

//滚动条处理逻辑
  const onScrollEvent = () => {
    if (dataLoadl) {
      return;
    }

    // 获取表格dom元素
    const table = ReactDOM.findDOMNode(scrollRef.current);
    const tableBody = (table as Element)?.querySelector('.ant-table-body');

    // 容器可视区高度
    const tableBodyHeight: number = tableBody?.clientHeight ? tableBody?.clientHeight : 0;

    // 内容高度
    const contentHeight = tableBody?.scrollHeight ? tableBody?.scrollHeight : 0;

    // 距离顶部的高度
    const toTopHeight = tableBody?.scrollTop ? tableBody?.scrollTop : 0;

    // 如果后端数据总条数小于10 或者滚动条没有出现，不需要再去调用后端去请求数据
    if (toTopHeight === 0 || data.length <= 10) {
      return;
    }

    // 当距离底部只有1时，重新获取数据
    if (contentHeight - (toTopHeight + tableBodyHeight) <= 1) {
      // 如果当前页数据大于等于总页数，则代表没有数据了
      if (tableData.length == data.length) {
        scorll = false;
        message.info('没有更多数据了');
        setDataLoad(false);
        return;
      } else {
        setDataLoad(true);
       //此处刷新数据
       getData();
      }
    }
  }

//显示的内容
return(
	<div onScrollCapture={onScrollEvent}>
		<Table columns={column} dataSource={data} pagination={false} ref={(c) => { scrollRef.current = c }}/>
	</div>
)