动态 React 组件导入类型问题

Question

假设我有一个名为

PersonalDetailsForm

的组件，我将其动态导入到我的多向导注册组件中

RegistrationFormSteps

。

当

PersonalDetailsForm

加载时，我希望能够调用其嵌套组件

PersonalDetailsForm.Loading

来展示加载状态。

PersonalDetailsForm.Loading

.

const PersonalDetailsForm = () => <h1>Test</h1>
const PersonalDetailsFormLoader = () => {
  return <>loading...</>;
};

PersonalDetailsForm.Loading = PersonalDetailsFormLoader;
export default PersonalDetailsForm

然后我将其导入我的

RegistrationFormSteps

组件

const PersonalDetailsForm = dynamic(() => import("./personal-details-form"), {
  ssr: false,
  loading: () => <PersonalDetailsForm.Loading />,
});

const loaders = [<TypeSelectionForm.Loading />, <PersonalDetailsForm.Loading />];

在这两种情况下我都会收到此错误

 
Property 'Loading' does not exist on type 'ComponentType<{}>'.
Property 'Loading' does not exist on type 'ComponentClass<{}, any>'. 

Answer 1

根据您的代码，您似乎打算根据当前状态渲染组件。以下是根据提供的状态实现此行为所需的实现。

 import React from "react";    
const PersonalDetailsForm = ({ status }) => {
      const PersonalDetailsFormLoader = () => <div>Loading...</div>;
      const PersonalDetailsFormError = () => <div>Error occurred!</div>;
      const PersonalDetailsFormSucess = () => <div>Success!</div>;
    
      const components = {
        loading: <PersonalDetailsFormLoader />,
        error: <PersonalDetailsFormError />,
        success: <PersonalDetailsFormSucess />,
      };
    
      return <div>{components[status]}</div>;
    };
    
    export default PersonalDetailsForm;

您可以在 RegistrationFormSteps 中导入以下组件

<PersonalDetailsForm status={"loading"} />