react-virtuoso：过扫描道具不起作用答案

【问题标题】：react-virtuoso: overscan props does not workreact-virtuoso：过扫描道具不起作用
【发布时间】：2021-06-11 18:53:43
【问题描述】：

我正在使用react-virtuoso 库来呈现一个简单的虚拟列表。代码非常简单。我通过了这个 overscan 道具并期望虚拟列表在视口上方和下方呈现 n 项目，但它不起作用。

当我上下滚动一点时，ExpensiveComponents 仍然呈现“正在加载...”文本。代码如下：

import { Virtuoso } from "react-virtuoso";
import { useEffect, useState, useRef, PropsWithChildren } from "react";

function ExpensiveComponent({ children }: PropsWithChildren<{}>) {
  const [render, setRender] = useState(false);
  const mountRef = useRef(false);

  useEffect(() => {
    mountRef.current = true;

    setTimeout(() => {
      if (mountRef.current) {
        setRender(true);
      }
    }, 150);

    return () => void (mountRef.current = false);
  }, []);

  return (
    <div style={{ height: 150, border: "1px solid pink" }}>
      {render ? children : "Loading..."}
    </div>
  );
}

用法

function App() {
  return (
    <Virtuoso
      style={{ height: "400px" }}
      totalCount={200}
      overscan={3} // ----------> this line does not work
      itemContent={(index) => {
        return <ExpensiveComponent>{index}</ExpensiveComponent>;
      }}
    />
  );
}

【问题讨论】：

标签： javascript reactjs react-virtuoso

【解决方案1】：

我错过了docs 的这个细节。与 react-window API 不同，overscan 单位是 pixel 而不是 row 在虚拟列表中，在我的情况下，我需要将 overscan 增加到 900px 和它现在似乎可以工作了。

<Virtuoso
  style={{ height: "400px" }}
  totalCount={200}
  overscan={900}
  itemContent={(index) => {
    return <ExpensiveComponent>{index}</ExpensiveComponent>;
  }}
/>

【讨论】：