react+Hook根据动态Id按需引入所需页面

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

ps：如有问题欢迎联系作者修正

需求为根据不同的数据来切换不同的页面，因为页面较多所以有了今天的方法

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用场景

根据父组件传递参数动态切换组件，避免多个if判断；
页面较少的话不推荐该写法

二、实现步骤

1.引入需要的hook和组件

引入需要的hook和组件useState，useEffect，Suspense，lazy

import React, { useState, useEffect, Suspense, lazy } from "react";

2.切换组件逻辑

代码如下（示例）：

//pageId为组件文件名称
function pageModules(props: { pageId:string}) {
    //监听pageId切换
    useEffect(() => {
        importComponent();
    }, [props.pageId])
    const importComponent = () => {
        const { pageId } = props;
        /*这里等同于
       		import ModoName from "./fromModulesAll/?/index"
	        const component=ModoName;
        */
        const component = lazy(()=>import(`./fromModulesAll/${pageId}/index`));
        //更新LazyFromModule接受组件
        setLazyFromModules(component);
    };
    //使用useState控制页面渲染
    const [LazyFromModules,setLazyFromModules] =  useState(null) as any;
    return <div className="pageModules">
        <Suspense fallback={<div>Loading...</div>}>
        	{LazyFromModules && <LazyFromModules />}
        </Suspense>
  </div>
}
export default pageModules;

---

总结

以上是最近工作内遇到的一个问题，本文仅为个人做法，希望对大家有所帮助