JS版pageArea高阶组件转TypeScript及箭头函数语法问题咨询

核心错误修正点 #

• 组件类型从错误的ReactNode改为React.ComponentType<P>泛型，适配函数组件与类组件
• 字符串类型从大写String改为TS基础类型string
• 补全ErrorFallback入参类型与pageArea泛型约束，消除隐式any报错
• 规范多层箭头函数的类型定义

完整可运行代码 #

import React from 'react';
// 若使用react-error-boundary库，直接导入内置FallbackProps类型
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';

// 错误兜底组件类型定义
function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

// pageArea是高阶组件，泛型P为传入组件的props类型
const pageArea = <P extends object>(Component: React.ComponentType<P>, title: string) => {
  // 返回的包装组件接收与原组件一致的props
  return (props: P) => {
    return (
      <>
        {/* <Header pTitle={title} /> */}
        <div>
          <ErrorBoundary FallbackComponent={ErrorFallback}>
            {Component ? <Component {...props} /> : null}
          </ErrorBoundary>
        </div>
      </>
    );
  };
};

如果未引入react-error-boundary的类型声明，可自行定义兜底组件参数类型：

// 自定义兜底组件入参类型
interface FallbackProps {
  error: Error;
  resetErrorBoundary: () => void;
}

你用到的多层箭头函数本质是*高阶组件（接收组件作为参数、返回新组件的函数）*的简写形式，和普通嵌套函数逻辑完全等价，等价写法如下：

// 普通函数嵌套写法，和多层箭头函数运行逻辑完全一致
function pageArea<P extends object>(Component: React.ComponentType<P>, title: string) {
  // 第一层接收待包装的组件和页面标题
  return function WrappedPage(props: P) {
    // 第二层返回的新组件接收原组件的props，渲染时包裹公共逻辑（错误边界、公共头部等）
    // 渲染逻辑同上
  }
}

// 调用方式相同：传入组件与标题，得到包装后的页面组件
const UserPage = pageArea(UserList, "用户列表");
// 直接当做普通组件使用即可，props类型会自动继承原UserList组件的props类型
<UserPage id={1} />

内容的提问来源于stack exchange，提问作者Md Parvez Alam