我正在寻找一种方法来知道使用 react-window 时屏幕上可以看到哪个列表项。
isVisible 道具错误地返回了可见性。
https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-nmukq
import React from "react";
import { render } from "react-dom";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import TrackVisibility from "react-on-screen";
import "./styles.css";
const Row = ({ index, style, isVisible }) => (
<div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
Row {index + " is" + isVisible}
</div>
);
const RowWrapper = ({ index, style }) => (
<TrackVisibility>
<Row index={index} style={style} />
</TrackVisibility>
);
const Example = () => (
<AutoSizer>
{({ height, width }) => (
<List
className="List"
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{RowWrapper}
</List>
)}
</AutoSizer>
);
render(<Example />, document.getElementById("root"));
这可能是因为缓存项目,但我想知道是否有另一种方法来跟踪项目的可见性