如何在React中實現無限滾動和下拉刷新功能

要在React中實現無限滾動和下拉刷新功能，可以使用react-infinite-scroll-component庫和react-pull-to-refresh庫。

1. 無限滾動功能： 使用react-infinite-scroll-component庫可以很容易地實現無限滾動功能。首先安裝該庫：

npm install react-infinite-scroll-component

然后在組件中引入并使用InfiniteScroll組件：

import React, { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const ExampleComponent = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    // 模擬加載更多數據
    setTimeout(() => {
      setItems(prevItems => [...prevItems, ...Array.from({ length: 10 })]);
    }, 1500);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
      {items.map((item, index) => (
        <div key={index}>{`Item ${index}`}</div>
      ))}
    </InfiniteScroll>
  );
};

export default ExampleComponent;

2. 下拉刷新功能： 使用react-pull-to-refresh庫可以實現下拉刷新功能。首先安裝該庫：

npm install react-pull-to-refresh

然后在組件中引入并使用PullToRefresh組件：

import React, { useState } from 'react';
import PullToRefresh from 'react-pull-to-refresh';

const ExampleComponent = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const refresh = () => {
    // 模擬刷新數據
    setTimeout(() => {
      setItems(Array.from({ length: 20 }));
    }, 1500);
  };

  return (
    <PullToRefresh onRefresh={refresh}>
      {items.map((item, index) => (
        <div key={index}>{`Item ${index}`}</div>
      ))}
    </PullToRefresh>
  );
};

export default ExampleComponent;

通過以上方法，你就可以在React中實現無限滾動和下拉刷新功能了。