TypeScript-React高阶组件(HOC)完整示例解析-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00003/article/details/148324934

TypeScript-React高阶组件(HOC)完整示例解析

react Cheatsheets for experienced React developers getting started with TypeScript 项目地址: https://gitcode.com/gh_mirrors/rea/react

什么是高阶组件(HOC)

高阶组件(Higher-Order Component)是React中用于复用组件逻辑的一种高级技巧。它本质上是一个函数，接收一个组件并返回一个新的组件。在TypeScript中实现HOC时，我们需要特别注意类型系统的处理，以确保类型安全。

为什么需要HOC

在实际开发中，我们经常会遇到需要向多个组件注入相同props的情况。例如：

主题颜色配置
国际化文本
用户认证信息
全局状态数据

使用HOC可以优雅地解决这些问题，避免在每个组件中重复编写相同的逻辑。

完整HOC示例解析

1. 定义注入的props接口

首先，我们需要定义通过HOC注入的props类型：

interface WithThemeProps {
  primaryColor: string;
}

这个接口描述了HOC将向组件注入的属性，这里我们只注入一个primaryColor属性。

2. 组件中使用注入的props

组件需要声明它接收的props类型，包括注入的props和自身的props：

interface Props extends WithThemeProps {
  children?: React.ReactNode;
}

class MyButton extends React.Component<Props> {
  public render() {
    // 可以使用themeProps和组件自身的props
  }
}

3. 创建HOC函数

这是HOC的核心实现：

export function withTheme<T extends WithThemeProps = WithThemeProps>(
  WrappedComponent: React.ComponentType<T>
) {
  const displayName = 
    WrappedComponent.displayName || WrappedComponent.name || "Component";

  const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
    const themeProps = useTheme(); // 获取要注入的props
    
    return <WrappedComponent {...themeProps} {...(props as T)} />;
  };

  ComponentWithTheme.displayName = `withTheme(${displayName})`;

  return ComponentWithTheme;
}

关键点说明：

T extends WithThemeProps 确保传入的组件类型包含HOC注入的props
Omit<T, keyof WithThemeProps> 从组件props中排除HOC注入的props
使用displayName有助于在React开发者工具中识别组件

4. 使用HOC包装组件

export default withTheme(MyButton);

5. 消费包装后的组件

使用包装后的组件时，注入的props变为可选：

<MyButton>Hello button</MyButton> // 使用默认主题
<MyButton primaryColor="#333">Hello Button</MyButton> // 覆盖默认主题

高级HOC模式

动态注入props

下面是一个更高级的HOC示例，可以根据传入组件的props动态注入值：

export function inject<TProps, TInjectedKeys extends keyof TProps>(
  Component: React.JSXElementConstructor<TProps>,
  injector: Pick<TProps, TInjectedKeys>
) {
  return function Injected(props: Omit<TProps, TInjectedKeys>) {
    return <Component {...(props as TProps)} {...injector} />;
  };
}

这个HOC可以静态注入指定的props，使得这些props在使用组件时不再需要手动传递。

支持ref转发

为了更好的可重用性，HOC应该支持ref转发：

function withTheme<T extends WithThemeProps = WithThemeProps>(
  WrappedComponent: React.ComponentType<T>
) {
  const ComponentWithTheme = React.forwardRef<
    HTMLElement, 
    Omit<T, keyof WithThemeProps>
  >((props, ref) => {
    const themeProps = useTheme();
    return <WrappedComponent ref={ref} {...themeProps} {...(props as T)} />;
  });

  return ComponentWithTheme;
}

这样包装后的组件可以像普通组件一样接收ref属性。