如何在TypeScript中无需HOC/Providers扩展React组件？

刚好理解你从Vue转React+TypeScript的痛点——Vue的this.$xxx用法确实很顺手，想在React里复刻类似体验又不想被HOC/Providers的Props绑定束缚，咱们可以通过自定义基础组件类来实现，完美贴合你的需求。

核心思路 #

创建一个继承自React.Component的基类，把路由、认证这类通用功能直接挂载到组件实例（this）上，而不是通过Props传递。这样所有业务组件只需要继承这个基类，就能直接用this.$auth、this.$route这类方法，完全不用关心底层的注入逻辑。

具体实现代码 #

第一步：封装通用服务+创建基类 #

import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

// 1. 封装认证服务（单例模式避免重复实例化）
class AuthService {
  private static instance: AuthService;

  private constructor() {}

  static getInstance(): AuthService {
    if (!AuthService.instance) {
      AuthService.instance = new AuthService();
    }
    return AuthService.instance;
  }

  // 检查是否已认证
  isAuthenticated(): boolean {
    return !!localStorage.getItem('authToken');
  }

  // 获取用户信息
  getUserInfo() {
    return JSON.parse(localStorage.getItem('userInfo') || '{}');
  }
}

// 2. 创建基础组件类
class BaseComponent<P = {}, S = {}, SS = {}> extends React.Component<P & RouteComponentProps, S, SS> {
  // 挂载认证服务到实例
  $auth = AuthService.getInstance();

  // 封装路由方法（把withRouter注入的Props转成实例方法）
  $route = () => ({
    location: this.props.location,
    history: this.props.history,
    match: this.props.match,
    // 额外封装常用路由操作，比如重定向
    redirect: (path: string) => this.props.history.push(path)
  });
}

// 用withRouter包装基类，一次性注入路由上下文
export default withRouter(BaseComponent);

第二步：业务组件直接继承使用 #

import BaseComponent from './BaseComponent';

// 业务组件的Props只需要定义自己的业务属性，完全不用管路由/认证相关的Props
interface AnotherProps {
  pageTitle?: string;
}

class AnotherComponent extends BaseComponent<AnotherProps> {
  render() {
    const { pageTitle } = this.props;
    const currentPath = this.$route().location.pathname;
    const isLoggedIn = this.$auth.isAuthenticated();

    return (
      <div className="page-container">
        <h1>{pageTitle || '默认页面'}</h1>
        {isLoggedIn ? (
          <p>欢迎回来，{this.$auth.getUserInfo().nickname}！</p>
        ) : (
          <p>请先登录</p>
        )}
        {currentPath === '/' ? (
          <div>这是首页</div>
        ) : (
          <div>当前页面：{currentPath}</div>
        )}
        <button onClick={() => this.$route().redirect('/login')}>跳转到登录页</button>
      </div>
    );
  }
}

export default AnotherComponent;

这个方案的优势 #

1. 贴合Vue使用习惯：和this.$auth、this.$route的用法完全一致，团队迁移成本极低
2. 组件逻辑独立：业务组件的Props只需要关心自己的业务属性，不用继承路由/认证相关的接口，也不用在组件外部套HOC
3. 避开实验性特性：完全不用装饰器，也不需要Context Providers传递Props，没有版本兼容风险
4. 可扩展性强：后续要加其他通用方法（比如this.$api接口请求），直接在BaseComponent里挂载即可，所有子类自动继承

对你之前尝试方案的补充说明 #

• 关于HOC：这个方案其实只在基类用了一次withRouter，但我们把注入的Props封装成了实例方法，业务组件完全感知不到Props的存在，解决了你担心的Props继承和挂载位置问题
• 关于Providers：我们用独立的单例服务替代了Context传递，更轻量也更符合Vue的服务模式
• 关于装饰器：完全避开了实验性的装饰器特性，不用担心里程碑版本的 breaking change

内容的提问来源于stack exchange，提问作者Alexandre Dias