react+antd+table实现表格数据在当前页从头到尾循环滚动展示

表格页

     import AutoScroll from "./auto-scroll";



        <AutoScroll
          dataSource={data}
          columns={columns}
          pagination={false}
          scroll={{ y: "calc(1280px - 130px - 150px - 500px)" }}
        />

表格滚动组件页

/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState, useRef } from "react";
import { Table } from "antd";
import { MonitoringData } from "../../models/big-screen";

export default function index(props: any) {
//   /**表格数据 */
//   dataSource: MonitoringData[];
//   /** 表格每次滚动间隔时间，单位ms */
//   rollTime: number;
//   /** 数据超过指定条数开始滚动 */
//   rollNum: number;
//   /** 表格每次滚动高度, 单位px */
//   rollTop: number;
//   /** 是否滚动 */
//   flag: boolean;
  const {
    dataSource,
    rollTime = 10,
    rollNum = 5,
    rollTop = 1.5,
    flag = true,
  } = props;
  const [timer, setTimer] = useState<number>(100); // 定时器
// 鼠标初始化，即开始滚动
  useEffect(() => {
    InitialScroll(dataSource);
    // 检测数组内变量 如果为空 则监控全局
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataSource]);
/**
 鼠标初始化，不滚动，鼠标移入移出后，才能触发滚动
 useEffect(() => {
    InitialScroll(dataSource);
    // 检测数组内变量 如果为空 则监控全局
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
*/
  // 开启定时器
  const InitialScroll = (data: MonitoringData[]) => {
    const v = document.getElementsByClassName("ant-table-body")[0];
    if (data.length > Number(rollNum) && flag) {
      // 只有当大于10条数据的时候 才会看起滚动
      const time = setInterval(() => {
        v.scrollTop += Number(rollTop);
        if (
          Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
        ) {
          v.scrollTop = 0;
        //   setTimeout(() => { v.scrollTop = 0 }, 1000)
        }
      }, Number(rollTime));
      setTimer(time); // 定时器保存变量 利于停止
    }
  };
  return (
    <div
      onMouseOver={() => {
        clearInterval(timer);
      }}
      onMouseOut={() => {
        InitialScroll(dataSource);
      }}
    >
      <Table
        pagination={false}
        scroll={{
          y: 500,
          x: "100%",
          scrollToFirstRowOnChange: true,
        }}
        {...props}
      />
    </div>
  );
}