typescript 反应HOC的ts类型声明

Posted 2021-05-20

type extraProps = {
  loaded: boolean;
};
export function WithPluginStatus<P = {}>(
  WrappedComponent: React.ComponentType<P & extraProps>
): React.ComponentClass<P> {
  return class extends React.Component<P> {
    render() {
      return (
        <Consumer>
          {data => <WrappedComponent {...this.props} loaded={data.loaded} />}
        </Consumer>
      );
    }
  };
}

import * as React from 'react';

export default function <P = {}>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentClass<P> {
  return class extends React.Component<P> {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}  

export default function wrapperFunc <Props, State, CompState> (
    WrappedComponent: typeof React.Component,
): React.ComponentClass<Props & State> {
    return class extends React.Component<Props & State, CompState> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}