包裹在 AutoSizer 中时，将 FixedSizeList 滚动到最后一个元素答案

【问题标题】：Scroll FixedSizeList to last element when wrapped in AutoSizer包裹在 AutoSizer 中时，将 FixedSizeList 滚动到最后一个元素
【发布时间】：2021-02-05 08:46:55
【问题描述】：

我使用 AutoSizer 进行了以下操作，但我需要列表在加载后滚动到最后一个元素，因此尝试获取 FixedSizeList 的引用无济于事。

我已经研究过使用前向引用和使用 FixedSizeList outerElementType 属性的 HOC，但我不知道如何正确地使用它。

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index}
  </div>
);

const Example = () => {
  const listRef = createRef();

  useEffect(() => {
    //The ref is always null
    if (listRef != null && listRef.current != null) {
      listRef.current.scrollToItem(1000);
    }
  }, [listRef]);

  return (
    <div style={{ height: "80vh" }}>
      <AutoSizer>
        {({ height, width }) => (
          <FixedSizeList
            ref={listRef}
            className="List"
            height={height}
            width={width}
            itemCount={1000}
            itemSize={35}
          >
            {Row}
          </FixedSizeList>
        )}
      </AutoSizer>
    </div>
  );
};

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

如果我是你，我会在你的 div 上添加一个 id，例如 id={`fixed-size-row-${index}`}，然后在你提供 id 的地方使用 make 函数：

const scrollToEl = (index) => {
  const el = document.getElementById(`fixed-size-row-${index}`);
  el.scrollIntoView();
}

【讨论】：