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

问题描述

我在AutoSizer中使用以下工具，但是加载后我需要将列表滚动到最后一个元素，因此尝试获取对FixedSizeList的引用无济于事。

我已经研究过使用前向引用和使用FixedSizeList outsideElementType属性的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>
  );
};

解决方法

如果我是我，我会在div上放置一个ID，例如id={`fixed-size-row-${index}`}，然后使用make函数提供ID：

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