如何从react-virtualized删行？InfiniteLoader删行自动补位最优方案

嘿，我来帮你搞定这两个问题！咱们一步步来：

1. 如何从react-virtualized中删除一行？ #

react-virtualized是完全数据驱动的组件，所以删除行的核心就是更新你的数据源（也就是你state里的msgList），组件会自动根据新数据重新渲染。

这里要注意尽量用不可变（immutable）的方式更新数组，避免直接修改原state，举个具体的例子：

// 假设你要删除索引为targetIndex的行
handleDeleteRow = (targetIndex) => {
  this.setState(prevState => ({
    // 用filter过滤掉目标行，返回新数组
    msgList: prevState.msgList.filter((_, index) => index !== targetIndex)
  }));
};

这样更新state后，react-virtualized的列表组件会自动感知数据变化，移除对应的行。

2. 删除行后让剩余行自动填补空缺 #

从你的render代码来看，你已经用listSize作为InfiniteLoader的rowCount，而listSize是基于msgList计算的——这方向是对的！要让剩余行填补空缺，关键要做好这几点：

（1）确保rowCount正确更新 #

你当前的listSize计算逻辑是：

let listSize = !msgList.length ? 1 : msgList.length + 1;

当你删除一行后，msgList的长度会减1，listSize也会跟着自动调整，这时候InfiniteLoader的rowCount就会更新，它会知道当前的总行数变了。

（2）保证内部列表组件拿到最新数据 #

假设你在AutoSizer里面用的是List组件（react-virtualized最常用的列表组件），一定要确保List的rowCount和InfiniteLoader的rowCount保持一致，并且rowRenderer里使用的是最新的msgList。

比如补充完整你的rowRenderer逻辑：

<AutoSizer>
  {({ width, height }) => (
    <List
      ref={ref => this.listRef = ref}
      width={width}
      height={height}
      rowCount={listSize}
      rowHeight={/* 你的行高，固定或动态 */}
      rowRenderer={({ index, key, style }) => {
        // 处理你设置的额外占位行（msgList.length对应的索引）
        if (index === msgList.length) {
          return <div key={key} style={style}>加载中...</div>;
        }
        const item = msgList[index];
        return <div key={key} style={style}>{item.content}</div>;
      }}
      onRowsRendered={onRowsRendered}
      ref={registerChild}
    />
  )}
</AutoSizer>

当msgList更新后，rowRenderer会拿到新的数据，自动用剩余的行填充原来的位置。

（3）动态高度的额外处理 #

如果你的行高是动态计算的（比如用CellMeasurer），删除行后可能需要手动触发重新计算行高，避免布局错乱：

// 在删除行的方法里调用
this.listRef.current.recomputeRowHeights();

这样操作下来，删除行之后，剩余的行就会自动填补空缺啦！

内容的提问来源于stack exchange，提问作者coder