react ts实现一个 无限加载组件

页面滑动到底部，直接加载下一页数据

• InfiniteScroll.tsx

/**
 * 无限 加载组件
 */

import { FC, createRef, useEffect, CSSProperties } from 'react'
import LoadingText from '../LoadingText'

type PropsType = {
  loadMore: () => void
  hasMore: boolean
}

const InfiniteScroll: FC = (props: PropsType) => {
  const { loadMore, hasMore } = props
  // const [loading, setLoading] = useState(hasMore)
  const ref = createRef()
  // console.log('InfiniteScroll', hasMore)

  useEffect(() => {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // setLoading(false)
          loadMore()
        }
      })
    })
    // console.log('ref.current', ref.current)

    if (ref.current) {
      observer.observe(ref.current)
    }
  }, [])

  const defaultStyle: CSSProperties = {
    padding: '0 0 0.6rem 0'
  }

  return (
    

      {hasMore ? (
        
      ) : (
        
          

            --- 我是有底线的 ---
          
        
      )}
    
  )
}

export default InfiniteScroll

• 用法

....


  async function loadMore() {
    // 加载下一页数据
  }

// hasMore  是 判断是否还有数据状态