如何在TypeScript中创建React高阶组件

我需要延迟渲染一个组件。问题是应用程序对两个不同的页面使用相同的redux存储，并且在一个React Route上清除操作（在useEffect中）不够快，并且新Route在从后端获取新数据之前获取无效数据，所以我决定创建延迟高阶组件。

这是高阶组件代码：

import { useState, useEffect, FC } from 'react';export function makeDelayComponent<PropsT>(timeout: number, Component: FC<PropsT>) {  return function(props: PropsT) {    const [render, setRender] = useState<boolean>(false);    useEffect(() => {      setTimeout(() => setRender(true), timeout);    }, []);    if (!render) {      return null;    }    return <Component {...props}/>;  };}

请注意，我没有使用any for props只有通用类型，TypeScript将根据您传递的组件类型确定props的类型。要使用此组件，请将其导入并包装你的组件：

import { makeDelayComponent } from './makeDelayComponent';type GreetingsT = {   name: string;};const Greetings = makeDelayComponent(0, function({name}: GreetingsT) {   return <p>Hello {name}</p>;});const App = () => {   <Greetings name="React"/>};