JS import 动态导入模块如何传参

Question

目前有个功能需要动态地 import 导入组件，但我不知道这种方式下如何传参！

useEffect(() => {
  switch (routerParams.type) {
    case 'fake':
      import('@/components/FakeData').then(module => { set_Dynamic_Components(module.default); }); break;
    default:
      import('@/pages/404').then(module => { set_Dynamic_Components(module.default); });
  }
}, [routerParams]);

组件参数如下：

interface Params {
  builder: string;
}
const FakeData: React.FC<Params> = (props) => {
  const [ builder ] = useState(props.builder);
  // 渲染
 return (
    <Button>
      {builder}
    </Button>
  );
};

Answer 1

已解决：（思路是外面再包一层）

const DataList: React.FC = () => {
  const routerParams: { type: string; } = useParams();
  const [dynamic_Components, set_Dynamic_Components] = useState<React.FC>();
  useEffect(() => {
    switch (routerParams.type) {
      case 'fake':
        import('@/components/FakeData').then(module => {
          const formatModule: React.FC = () => { return (<module.default builder={routerParams.type}></module.default>); };
          set_Dynamic_Components(formatModule);
        });
        break;
      default:
        import('@/pages/404').then(module => { set_Dynamic_Components(module.default); });
    }
  }, [routerParams]);
  return (
    <PageContainer
 onBack={() => window.history.back()}>
      <Space direction="vertical" style={{ width: '100%' }}>
        {dynamic_Components}
      </Space>
    </PageContainer>
  );
};
export default DataList;