关于 React 动态引入 组件

  // 动态引入外部组件
  const [PopEle, setPopEle] = useState<LazyExoticComponent<ComponentType<{
    pop: boolean; // 这些都是要传递的属性
    setPop: React.Dispatch<React.SetStateAction<boolean>>;
    title: string;
    text: string;
    id: string,
    getCalbackData: (obj: { [key: string]: string; }) => void;
  }>> | null>(null);


  // 外部组件
  const loadComponent = async (url: string) => {
    // 使用动态import()函数异步加载组件
    try {
      // import ()中的内容必须携带字符串 全变量不可以会报错
      const DynamicComponent = await React.lazy(() => import(`@/pages/qm/qmbp/qmbpa6/${url}`));
      // 设置加载完成的组件
      setPopEle(() => DynamicComponent);
    } catch (error) {
      console.log(error);
    }
  };

  const [pop, setPop] = useState(false);
  const [popId, setPopId] = useState('');


  // 页面初始加载
  useEffect(() => {
    loadComponent('UniversalPopupTable');

  }, []);


    {PopEle && <PopEle
        pop={pop}
        setPop={setPop}
        title={'牌号'}
        text={"测试"}
        id={popId}
        getCalbackData={getCalbackData} />
      }