如何在React中使用antd表保留滚动位置

Question

我已经定义了这个函数

  const addRow = useCallback(() => {
    setDataSource((prevRows) => [
      { id: prevRows.length + 1, name: `Item ${prevRows.length + 1}` },
      ...prevRows
    ]);
  }, []);

此函数在已呈现的行之上添加新行。 就我而言，使用此函数在 antd.Table 中已存在的行之上添加新行。 我使用这个函数的间隔是500ms。 让我也定义该函数。

 useEffect(() => {
    const intervalId = setInterval(addRow, 500);
    return () => clearInterval(intervalId); // Clear the interval on unmount
  }, [addRow]);

现在这是我的 antd.Table 组件在 App 组件中。

      <Table
        className="table-striped-rows"
        rowKey={"id"}
        columns={columns}
        dataSource={dataSource}
        pagination={false}
      />

服务器运行代码后，我会等到 ant 表中的行溢出浏览器的屏幕。 然后我尝试阅读表格底部的第一行。 但现在阅读该行相当困难。因为新行不断添加，旧行不断向下流动。 那么我怎样才能停止该流程以便读取表中所需的行呢？

这是我的挑战的完整代码的网址 运行此代码时，您可能不想等到行自行溢出屏幕。 在这种情况下，您可以通过单击表格顶部的添加行按钮来加快流程。

我真的希望有人帮忙解决这个问题。 因为这对我来说非常重要。 预先感谢您！！

我需要这样的东西。但我必须使用 antd.Table 而不是手动定义的 ItemList 组件。

Answer 1

在添加新行之前，您需要检查您的组件是否已经大于屏幕高度，然后取消您安装的间隔。

// you need a ref for the wrapping element
const div = useRef(null);

// in your top-level element this ref can be used
<div ref={div}>

然后你可以做这样的事情：

  useEffect(() => {
    let intervalId = 0;
    intervalId = setInterval(() => {
      if (
        div.current &&
        div.current.getBoundingClientRect().height >= window.innerHeight
      ) {
        clearInterval(intervalId);
      } else {
        addRow();
      }
    }, 500);
    return () => clearInterval(intervalId); // Clear the interval on unmount
  }, [addRow]);

您可以在这里找到调整：https://codesandbox.io/s/old-bash-k79y63?file=/src/App.js