第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

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

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

楊__羊羊 2023-07-06 16:43:28
我正在嘗試創(chuàng)建一個(gè)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是一個(gè)獲取 page 作為參數(shù)并返回 Promise 的函數(shù),如下所示:type Data = {  id: number;  name: string;};function getData(args: { page: number }): Promise<Data[]> {  // ...}現(xiàn)在我的問題是如何定義InfiniteScroll組件的類型以自動(dòng)為其 render prop 函數(shù)設(shè)置類型?實(shí)際上我想items在渲染道具中檢索其類型,即道具Data[]中使用的 Promise 的返回值fetcher我添加了這個(gè)codesandbox來處理它:https://codesandbox.io/s/vigorous-resonance-lj09h ?file=/src/InfiniteScroll.tsx
查看完整描述

1 回答

?
qq_花開花謝_0

TA貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個(gè)贊

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


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))

};

應(yīng)用程序.tsx:


export default function App() {

  return (

    <>

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

        {(items) => (<>

           {(items.map((item, 

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

         </>)}

      </InfiniteScroll>

    </>

  );

}


查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)