react-router-dom 和 forwardRef 类型冲突

场景：在 TS 组件内使用 react-router-dom 和 forwardRef，向外部提供 interface 时，类型冲突。 方案：利用 HOC 包裹一层，做类型转换。

⚠️ todo

import React, { forwardRef } from 'react';
import type { Ref, ComponentType } from 'react';
import { withRouter } from 'react-router-dom';
import type { RouteComponentProps } from 'react-router-dom';
export const withRouterForwardRef = <ComposedComponentType extends {}>(ComposedComponent) => {
  interface WrapperComponentProps {
    forwardedRef: Ref<ComposedComponentType>;
  }
  const WithRouter = withRouter<
    RouteComponentProps & WrapperComponentProps,
    ComponentType<RouteComponentProps & WrapperComponentProps>
  >(({ ...props }) => <ComposedComponent ref={props.forwardedRef} {...props} />);
  return forwardRef<ComposedComponentType>((props, ref) => (
    <WithRouter {...props} forwardedRef={ref} />
  ));
};