如何用TSX创建泛型React函数组件，以Suspense加载组件（fallback为null）

一、创建泛型版WithSuspense高阶组件 #

原示例使用any会丢失类型校验，我们可以通过泛型让组件的props类型完全匹配，提升类型安全性：

import React, { Suspense, LazyExoticComponent } from "react";

// 泛型P代表懒加载组件接收的props类型，限定为对象类型
const WithSuspense = <P extends object>(LazyComponent: LazyExoticComponent<React.ComponentType<P>>) => {
  return (props: P) => (
    <Suspense fallback={null}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

export default WithSuspense;

泛型说明 #

• <P extends object>：约束传入的props必须是对象类型，避免非对象类型的错误传入
• LazyExoticComponent<React.ComponentType<P>>：明确懒加载组件的类型，确保它能接收类型为P的props
• 返回的函数组件严格接收类型为P的props，保证传递给懒加载组件的props类型完全匹配

二、使用WithSuspense加载普通组件 #

先通过React.lazy()定义懒加载组件，再用WithSuspense包装后直接使用：

// 定义懒加载组件
const MyLazyComponent = React.lazy(() => import("./MyLazyComponent"));

// 用WithSuspense包装
const MyLazyComponentWithSuspense = WithSuspense(MyLazyComponent);

// 在父组件中使用，props类型会自动推导校验
function ParentComponent() {
  return <MyLazyComponentWithSuspense title="懒加载组件示例" />;
}

三、在React路由中使用WithSuspense加载路由组件 #

结合react-router-dom实现路由组件的懒加载，步骤如下：

import { Routes, Route } from "react-router-dom";
import WithSuspense from "./WithSuspense";

// 懒加载各个路由组件
const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Dashboard = React.lazy(() => import("./Dashboard"));

// 用WithSuspense包装每个路由组件
const HomeWithSuspense = WithSuspense(Home);
const AboutWithSuspense = WithSuspense(About);
const DashboardWithSuspense = WithSuspense(Dashboard);

function AppRouter() {
  return (
    <Routes>
      <Route path="/" element={<HomeWithSuspense />} />
      <Route path="/about" element={<AboutWithSuspense />} />
      {/* 路由组件也可传递props，类型会自动校验 */}
      <Route path="/dashboard" element={<DashboardWithSuspense username="jane_smith" />} />
    </Routes>
  );
}

export default AppRouter;

关于fallback={null}的说明 #

将Suspense的fallback设为null，意味着组件加载过程中不会显示任何占位内容，适用于不需要加载动画、或组件内部自行处理加载状态的场景。

内容的提问来源于stack exchange，提问作者Sohan Paliyal Simprosys