我需要延迟渲染一个组件。问题是应用程序对两个不同的页面使用相同的redux存储,并且在一个React Route上清除操作(在useEffect中)不够快,并且新Route在从后端获取新数据之前获取无效数据,所以我决定创建延迟高阶组件。
![如何在TypeScript中创建React高阶组件](/d/file/2023090103/2022113019480655.webp)
这是高阶组件代码:
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"/>};
声明:若涉及版权问题,请联系我们进行删除!谢谢大家!