반응 구성 요소에서 무한 스크롤을 설정하는 방법은 무엇입니까?

무한 스크롤은 오늘날의 것입니다. 페이지가 있는 페이지 매김과 달리 사람들은 점점 더 많은 데이터를 얻기 위해 무한 스크롤을 선호합니다. Facebook과 Instagram은 Infinite Scroll의 힘을 활용하는 아주 좋은 예입니다.



꽤 인기가 있고 전 세계의 많은 개발자들이 웹 앱에서 이 벌금npm package을 사용하고 있는 무한 스크롤 패키지를 발견했습니다.

이 npm 패키지는 작은 크기, 즉 177kb입니다. 다음과 같은 몇 가지 소품이 필요합니다.

첫 번째 소품은 데이터 길이인 dataLength입니다.

dataLength 뒤에 다음 소품이 있습니다. 이것은 가장 중요한 소품 중 하나입니다. 다음 데이터를 가져오는 작업을 트리거하는 loadMoreData 함수를 전달합니다. 이 가져온 데이터는 InfiniteScroll 구성 요소에 자식으로 전달되며 데이터에는 이전 데이터도 포함되어야 합니다. 따라서 기본적으로 [newData, ...PreviousData]입니다

.

세 번째 prop은 hasMore입니다. 부울 값을 사용하여 InfiniteScroll에게 바닥에 도달하면 다음 함수를 호출할지 여부를 알려주거나 next가 호출되지 않으면 사용자에게 endMessage를 표시한다는 것이 이름으로 명확합니다. 즉, hasMore가 false입니다. .

네 번째 소품인 로더는 구성 요소가 다음 데이터 로드를 기다리는 동안 표시할 폴백으로 표시되는 요소를 사용합니다.

다섯 번째 속성은 endMessage로, 사용자에게 더 이상 데이터가 없으며 hasMore가 false임을 알려줍니다.

InfiniteScrollhere을 설명하는 codesandbox를 확인할 수 있습니다.

InfiniteScroll의 여는 태그와 닫는 태그 사이에 데이터를 자식으로 제공하는 것을 잊지 마십시오.

<InfiniteScroll
  dataLength={dataItems.length}
  next={LoadMoreData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: 'center' }}>
      <b>You have seen all the data</b>
    </p>
  }
>
  {dataItems}
</InfiniteScroll>

다양한 시나리오에서 유용한 몇 가지other props도 있지만 위의 5가지 소품은 멋진 무한 스크롤을 탑재하기에 충분합니다.

참고: 팝업 또는 모달 내에서 InfiniteScroll로 작업하는 경우 ScrollableTarget 소품이 도움이 됩니다. id 속성을 사용하여 InfiniteScroll의 상위 div를 생성하고 이 id를 ScrollableTarget 소품에 대한 인수로 제공해야 합니다. 코드 샌드박스를 사용할 수 있습니다here.

다른 Infinite Scroll 패키지를 발견한 경우 토론에서 언급하면 ​​기꺼이 시도해 보겠습니다.