reactjs - Använda TypeScript med React HOC, React.lazy och forwardRef

Jag vill skriva en HOC som omsluter en komponent genom att använda React.lazy och React.Suspense i TypeScript, men jag vet inte hur jag ska fixa typerrors.

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

Svar #1

Jag kan ha fel, men jag tror att detta beror på en begränsning i React. Se typen av forwardRef:

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

React förväntar sig PropsWithoutRef och du försöker använda ref. Jag tror att det är fel. Du bör använda detta exempel:

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} />

All krediter går till detta svar