使用高阶组件 React TypeScript 提升静态答案

【问题标题】：React TypeScript hoisting statics with a higher-order component使用高阶组件 React TypeScript 提升静态
【发布时间】：2020-08-31 11:21:21
【问题描述】：

我正在尝试将我的项目从 JavaScript 移植到 TypeScript。我有一个名为hoistStatics 的高阶高阶组件，它可以接收一个 HOC 并提升包装组件的静态属性

import hoistNonReactStatics from 'hoist-non-react-statics';

export const hoistStatics = higherOrderComponent => BaseComponent => {
  const NewComponent = higherOrderComponent(BaseComponent);
  hoistNonReactStatics(NewComponent, BaseComponent);
  return NewComponent;
};

我的问题是我不知道如何输入。有没有办法输入一个通用的高阶组件？在这种情况下我将如何处理道具？

【问题讨论】：

标签： reactjs typescript higher-order-components

【解决方案1】：

您需要输入 HOC，然后使用它来输入 HOHOC。

import hoistNonReactStatics from 'hoist-non-react-statics';

type HOC<InnerProps, OuterProps = InnerProps> = (
  Component: React.ComponentType<InnerProps>,
) => React.ComponentType<OuterProps>;

const hoistStatics = <InnerProps, OuterProps>(
  higherOrderComponent: HOC<InnerProps, OuterProps>,
): HOC<InnerProps, OuterProps> => (
  BaseComponent: React.ComponentType<InnerProps>,
) => {
  const NewComponent = higherOrderComponent(BaseComponent);
  hoistNonReactStatics(NewComponent, BaseComponent);
  return NewComponent;
};

export default hoistStatics;

【讨论】：