ReactJs 게으른 로더

Question

저는 ReactJs에서 새롭게 왔습니다. 페이지 인 경우

나는 내가이는 모든 데이터를로드 미세하지만 처음 작동하고, 실제로

(https://jasonslyvia.github.io/react-lazyload/examples/#/normal?_k=rz3oyn)

을 사용하고 아래로 스크롤 내 응용 프로그램에서 게으른 로더가 필요합니다.

페이지를 아래로 스크롤하면 api를 호출하고 데이터를 설정하려고합니다.

감사합니다.

Answer 1

아마 당신이 필요로하는 것은 무한한 스크롤 기능입니다. 비동기 데이터를로드 할 때 React에 대한 좋은 옵션이 있습니다.

1) 고성능 (많은 결과가 서버에서 제공됨)이 필요한 경우 react-infinite을 시도 할 수 있습니다. 문서가 말하는 것처럼 :

렌더링하여이를 무한을 해결해 반응은 DOM은 사용자 가 볼 수 있거나 곧 볼 수 있다는 노드.

2) 또 다른 간단한 옵션은 다음과 같습니다 react-infinite-scroller

일반 원칙이 라이브러리가 작동하도록 모듈이 요청하거나 대기하는 방법을 만들 때 알려드립니다 자신의 소품을 전달하는 것입니다.

<InfiniteScroll 
    pageStart={0} 
    loadMore={loadFunc} 
    hasMore={true || false} 
    loader={<div className="loader">Loading ...</div>} 
> 
    {items} // <-- This is the content you want to load 
</InfiniteScroll> 

loadFunc은 서버에 API 호출을하고 성공적으로 해결 될 때까지 false로 hasMore을 설정합니다.