使用打字稿定义无限滚动反应组件的类型

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

getData是一个函数，它获取 page 作为其参数并返回如下所示的 Promise：

type Data = {
id: number;
name: string;
};
function getData(args: { page: number }): Promise<Data[]> {
// ...
}

现在我的问题是如何为我的InfiniteScroll组件定义类型以自动为其渲染道具功能设置类型？

实际上，我希望渲染道具中的items从Data[]中检索其类型，即fetcher道具中使用的Promise的返回值

我添加了这个代码沙箱来处理它：
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))
};

App.tsx：

export default function App() {
return (
<>
<InfiniteScroll fetcher={(page: number) => getData(page)}>
{(items) => (<>
{(items.map((item, 
index) => <p key={index}> {item.name} </p> ))} 
</>)}
</InfiniteScroll>
</>
);
}