javascript - 无法访问使用 React.lazy 导入的组件的静态属性

Question

我在这样的文件中有一个 react 功能组件 -

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不渲染。
另外，我收到了 Comp.Slot 的 Typescript 错误，说

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>

独立组件并在其上使用惰性。