将 TypeScript 与 React HOC、React.lazy 和 forwarRef 一起使用答案

【问题标题】：Using TypeScript with React HOC, React.lazy and forwarRef将 TypeScript 与 React HOC、React.lazy 和 forwarRef 一起使用
【发布时间】：2021-04-03 10:32:19
【问题描述】：

我想编写一个 HOC，通过在 TypeScript 中使用 React.lazy 和 React.Suspense 来包装组件，但我不知道如何修复类型错误。

type AsyncComponentFactory<P> = () => Promise<{ default: ComponentType<P> }>;

export function loadable<P>(factory: AsyncComponentFactory<P>): ComponentType<P> {
  const LazyComponent = React.lazy(factory);

  const WrappedWithLoadableComponent = forwardRef<P>((props: P, ref) => (
    <React.Suspense fallback={'loading'}>
      <LazyComponent {...props} ref={ref} />
    </React.Suspense>
  ));

  WrappedWithLoadableComponent.displayName = 'LazyExoticComponent(loadableComponent)';

  return WrappedWithLoadableComponent;
}

const JobsView = loadable(() => import(/* webpackChunkName: "JobsView" */ '@views/Jobs'));

【问题讨论】：

有时@ts-ignore 是最佳实践

标签： reactjs typescript react-hooks

【解决方案1】：

我可能是错的，但我认为这是由于反应的限制。查看forwardRef的类型：

    function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

React 需要 PropsWithoutRef 并且您正在尝试使用 ref。我认为这是错误的。你应该使用这个例子：

import React, { ForwardRefRenderFunction } from 'react'

type IMyComponentProps = { a: string }
const MyComponentRenderFn: ForwardRefRenderFunction<HTMLDivElement, IMyComponentProps> =
    (props, ref) => <div ref={ref}>Hoopla</div>

const MyComponent = React.forwardRef(MyComponentRenderFn);
const myRef = React.createRef<HTMLDivElement>();

<MyComponent a="foo" ref={myRef} />

所有功劳归于answer

【讨论】：