React TypeScript 提升静力学与高阶组件

Question

我正在尝试将我的项目从 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;
};

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

Answer 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;

React TypeScript 提升静力学与高阶组件

React TypeScript hoisting statics with a higher-order component

reactjs

typescript

higher-order-components