react-window用InfiniteLoader包裹后如何获取ref?

Question

import { VariableSizeList as List, areEqual } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

const Demo = ()=>{
    const ref = useRef();

    const click = ()=>{
        // 这里报错，ref没有scrollToItem方法
        ref.scrollToItem(0)
    }

return <div>
<Button onClick={click}>click</Button>
<ListWrap ref={ref}></ListWrap>
</div>
}

const ListWrap = ({ hasNextPage, isNextPageLoading, loadNextPage }) => {
 
  return (
    <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}>
      {({ onItemsRendered, ref }) => {
        return (
          <List
            ref={ref}
          >
            {Cell}
          </List>
        );
      }}
    </InfiniteLoader>
  );
};

类似上面的代码， 如何获取List的实例ref呢？

Answer 1

import { useRef } from 'react';
import { VariableSizeList as List, areEqual } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

const Demo = () => {
  const listRef = useRef();

  const click = () => {
    if (listRef.current) {
      listRef.current.scrollToItem(0);
    }
  };

  return (
    <div>
      <Button onClick={click}>click</Button>
      <ListWrap listRef={listRef} />
    </div>
  );
};

const ListWrap = ({ hasNextPage, isNextPageLoading, loadNextPage, listRef }) => {
  return (
    <InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}>
      {({ onItemsRendered, ref }) => {
        return (
          <List
            ref={(instance) => {
              ref(instance);
              listRef.current = instance;
            }}
          >
            {Cell}
          </List>
        );
      }}
    </InfiniteLoader>
  );
};