使用 typescript 定义 InfiniteScroll React 组件的类型

Question

我正在尝试创建一个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

Answer 1

如果我们可以看到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>

    </>

  );

}