亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 typescript 定義 InfiniteScroll React 組件的類型

使用 typescript 定義 InfiniteScroll React 組件的類型

楊__羊羊 2023-07-06 16:43:28
我正在嘗試創建一個InfiniteScroll組件以這種方式使用它:import { getData } from 'api';import { InfiniteScroll } from 'components';export const App = () => (  <InfiniteScroll fetcher={page => getData({page})}>    {({items}) => items.map(item => <p key={item.id}>{item.name}</p>)}  </InfiniteScroll>);andgetData是一個獲取 page 作為參數并返回 Promise 的函數,如下所示:type Data = {  id: number;  name: string;};function getData(args: { page: number }): Promise<Data[]> {  // ...}現在我的問題是如何定義InfiniteScroll組件的類型以自動為其 render prop 函數設置類型?實際上我想items在渲染道具中檢索其類型,即道具Data[]中使用的 Promise 的返回值fetcher我添加了這個codesandbox來處理它:https://codesandbox.io/s/vigorous-resonance-lj09h ?file=/src/InfiniteScroll.tsx
查看完整描述

1 回答

?
qq_花開花謝_0

TA貢獻1835條經驗 獲得超7個贊

如果我們可以看到InfiniteScroll組件代碼,我們可能可以更好地幫助您,但本質上,您必須執行如下操作。


interface Props<T> {

  fetcher: (page: number) => Promise<T[]>;

  children: (data: T[]) =>  JSX.Element;

}


export const InfiniteScroll = <T extends unknown>({

  fetcher,

  children

}: Props<T>) => {

  const [page, setPage] = useState(1);

  const [data, setData] = useState<T[] | null>(null);


  useEffect(() => {

    fetcher(page).then((res) => {

      setData(res);

    });

  }, [page]);


 if (!data) return (

    <p> loading... </p>

  )

  return (children(data))

};

應用程序.tsx:


export default function App() {

  return (

    <>

      <InfiniteScroll fetcher={(page: number) => getData(page)}>

        {(items) => (<>

           {(items.map((item, 

            index) => <p key={index}> {item.name} </p> ))} 

         </>)}

      </InfiniteScroll>

    </>

  );

}


查看完整回答
反對 回復 2023-07-06
  • 1 回答
  • 0 關注
  • 182 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號