reactjs - 将 TypeScript 与 React HOC、React.lazy 和 forwarRef 结合使用

Question

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

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'));

Answer 1

我可能是错的，但我认为这是由于 react 的限制。查看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