<p>react-window-infinite-loader: 잘못된 목록 참조</p>

InfiniteLoader 렌더 소품에서 FixedSizeList 구성 요소로 참조를 전달하고 있습니까?

예, 이것이 현재 가지고 있는 것입니다.

<InfiniteLoader
  isItemLoaded={index => index < items.length}
  itemCount={1000}
  threshold={20}
  loadMoreItems={loadMoreItems}
  ref={infiniteLoaderRef}
>
  {({ onItemsRendered, ref }) => (
    <AutoSizer style={{ minHeight: "800px" }}>
      {({ height, width }) => (
        <VariableSizeGrid
          columnWidth={_index => width / numberOfColumns}
          columnCount={numberOfColumns}
          rowCount={Math.ceil(items.length / numberOfColumns)}
          rowHeight={_index => heightOfRow}
          height={height}
          width={width}
          ref={ref}
        >
          {props => <GridItem {...props} />}
        </VariableSizeGrid>
      )}
    </AutoSizer>
  )}
</InfiniteLoader>

InfiniteLoader 와 AutoSizer 교체하여 AutoSizer 를 외부 구성 요소로 만들 수 있습니까?

내가 올바르게 기억한다면 그것은 나를 위해 일했습니다.

AutoSizer를 외부 구성 요소로 사용하는 경우에도 동일한 문제가 발생합니다.

안녕하세요 @killpowa , 제가 ​​볼 수 있는 예가 있습니까?

안녕하세요 @chrisneven님 , 여기 예제가 있습니다 - 코드샌드박스

미리 감사드립니다. :)

안녕하세요 @DevAKS-Yara,

귀하의 예를 살펴보았고 ref 에서 InfiniteLoader 구성 요소를 목록 구성 요소( VirtualTable )로 전달하지 않았으므로 이것이 주된 이유입니다. invalid ref 메시지를 받습니다.

나는 당신의 예를 편집하고 작동하는 버전을 구현했습니다

여기서 중요한 점은 목록 구성 요소에 대한 다른 참조를 원하고 InfiniteLoader 구성 요소도 사용할 때 InfiniteLoader 참조 및 필요한 기타 참조를 설정하는 콜백 함수를 작성해야 한다는 것입니다. . VirtualTable 구성 요소의 setRefs 함수를 참조하십시오.

안녕하세요 @DevAKS-Yara,

귀하의 예를 살펴보았고 ref 에서 InfiniteLoader 구성 요소를 목록 구성 요소( VirtualTable )로 전달하지 않았으므로 이것이 주된 이유입니다. invalid ref 메시지를 받습니다.

나는 당신의 예를 편집하고 작동하는 버전을 구현했습니다

여기서 중요한 점은 목록 구성 요소에 대한 다른 참조를 원하고 InfiniteLoader 구성 요소도 사용할 때 InfiniteLoader 참조 및 필요한 기타 참조를 설정하는 콜백 함수를 작성해야 한다는 것입니다. . VirtualTable 구성 요소의 setRefs 함수를 참조하십시오.

오! InfiniteLoader 에서 VirtualTable ref를 직접 전달하려고 했지만 잘 되지 않았습니다. 전달된 ref를 직접 사용하는 것과 콜백 함수를 통해 설정하는 것의 차이점은 무엇입니까?

BTW, 솔루션 주셔서 감사합니다! 👍🏼 :)

BTW, 솔루션 주셔서 감사합니다! 👍🏼 :)

천만에요!

오! InfiniteLoader 에서 VirtualTable ref를 직접 전달하려고 했지만 잘 되지 않았습니다. 전달된 ref를 직접 사용하는 것과 콜백 함수를 통해 설정하는 것의 차이점은 무엇입니까?

ref를 직접 전달할 수도 있지만 이 경우에는 분명히 여러 참조가 필요합니다. "콜백 참조"를 사용하여 DOM 노드에 여러 참조를 할당할 수 있습니다. 가급적이면 useCallback 후크에 넣어야 합니다. 이렇게 하면 콜백 참조가 다시 렌더링되는 동안 변경되지 않습니다.