响应虚拟列表可更新项计数

Question

像react-virtualized、react-window和react-virtuoso这样的库具有item count属性，类似于materal-ui下面的代码。但是，它位于return中。有什么方法可以使item counter更新吗？

export default function VirtualizedList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
        {renderRow}
      </FixedSizeList>
    </div>
  );
}

Answer 1

是的，您可以将一个动态值传递给FixedSizeList中的FixedSizeList属性。它会照顾它，并确保卷轴保持在当前的位置。

示例代码如下所示

const Example = () => {
  const [rowCount, setRowCount] = useState(10);
  useEffect(() => {
    setTimeout(() => {
      console.log("changed");
      setRowCount(1000);
    }, 10000);
  }, []);
  console.log(rowCount);
  return (
    <List
      className="List"
      height={150}
      itemCount={rowCount}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
};

工作演示