React的动态载入

loadComponent.tsx

import React from "react";
import { Suspense } from "react";

const loadComponent = (path: string, props: any) => {
  const Component = React.lazy(() => {
    return new Promise((resolve, reject) => {
      import(`./${path}`).then(
        (Component) => {
          resolve(Component);
        },
      );
    });
  });
  return <Suspense>
    <Component {...props} />
  </Suspense>
};

export default loadComponent

index.tsx

import { useEffect, useState } from "react";
import loadComponent from "./loadComponent";

export default function () {
    const [component, setComponent] = useState<any>()
    return (
        <>
            <button onClick={()=>{
                setComponent(loadComponent('a',null))
            }>A</button> <button onClick={()=>{
                setComponent(loadComponent('b',setComponent))
            }>B</button>
            {component}
        </>
    )
}

a.tsx

export default function () {
    const [component, setComponent] = useState<any>()
    return (
        <>
            a
        </>
    )
}

b.tsx

export default function () {
    const [component, setComponent] = useState<any>()
    return (
        <>
           <button onClick={()=>{
                setComponent(loadComponent('a',null))
            }>A</button>
        </>
    )
}