Невозможно получить доступ к статическим свойствам компонента, импортированного с помощью React.lazy

Question

У меня есть функциональный компонент реакции в таком файле -

const Slot: React.ElementType = () => null;
const Component = ({ children }): JSX.Element | null => {
  const childrenArr = React.Children.toArray(children) as React.ReactElement[];
  const slot = childrenArr.find(child => child.type === Slot);

  return (
    <div>
      <div>Hi</div>
      {slot && slot.props.children}
    </div>
  );
};

Component.Slot = Slot;
export default Component;

И я использую этот компонент, импортируя его в другой, используя React.lazy

const Comp = React.lazy(() => import(/* webpackChunkName: "comp" */ './Component'))

Я визуализирую этот компонент под React.Suspense, как это

 <Suspense fallback={null}>
   <Comp>
     Welcome
     <Comp.Slot>Robert</Comp.Slot>
   </Comp>
 </Suspense>

Но Robertне рендеринг. Кроме того, я получаю ошибку Typescript дляComp.Slot, говоря

Property 'Slot' does not exist on type 'LazyExoticComponent<{ (): Element | null; Slot: FunctionComponent<any>;}>'.

Как лучше всего это исправить? Пожалуйста помоги.

Answer 1

Я полагаю lazy работает только с экспортом по умолчанию и только с экспортируемым конкретным компонентом, поскольку он создает вокруг него своего рода HOC.

Что вы можете сделать, так это сделать эту часть

   <Comp>
     Welcome
     <Comp.Slot>Robert</Comp.Slot>
   </Comp>

автономный компонент и использовать его лениво.