reactjs - 在 TypeScript 中编写 HOC 作为装饰器？

Question

我正在尝试创建一个从 React 获取参数的装饰器。上下文提供者，如果我想创建 HOC 很容易：

interface DashboardProps {
   user: User;
}

class Dashboard extends React.Component<DashboardProps> {
  render() {
     return (<span>{this.props.user.name}</span>);
  }
}

function withUser(WrappedComponent) {
  return class extends React.Component {
    render() {
      return (
        <UserContext.Consumer>
         {user => <WrappedComponent user={user} {...this.props}>}
        </UserContext.Consumer>
      );
    }
  }
}

export default withUser(Dashboard);

但我不确定如何像装饰器一样编写它：

@withUser
class Dashboard ...

Answer 1

typescript 中的类装饰器类型如下所示：

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

这意味着类装饰器函数必须返回相同类型的组件，或者什么都不返回。

function withUser(WrappedComponent): void {
  return class extends React.Component {
    render() {
      return (
        <UserContext.Consumer>
         {user => <WrappedComponent user={user} {...this.props}>}
        </UserContext.Consumer>
      );
    }
  } as unknown as void;
}