最近用React + UMI +qiankun的框架撸了一个后台管理系统,主应用使用的qiankun做的微前端,子运用使用的是UMI搭建的React 项目,涉及到主应用与子运用的通信问题。
1.主应用用的qiankun中的registerMicroApps进行的传值,代码如下:
registerMicroApps([
{
name: 'react app', // app name registered
entry: '//localhost:8080',
container: '#yourContainer',
activeRule: '/yourActiveRule',
props:{
userId:'xxx'
}
},
2.子应用根据UMI提供的API:
import { useModel } from 'umi';
function MyPage() {
const masterProps = useModel('@@qiankunStateFromMaster');
return <div>{(masterProps)}</div>;
}
所以按照官网的API的写法,我一开始是在项目中这样获取并赋值的
import { useModel } from 'umi'
const College = () => {
const [userId, setUserId] = useState<>(false)
const masterProps = useModel('@@qiankunStateFromMaster')
if (masterProps && {
setUserId()
}
}
部署子应用后,一直报错
经过分析发现,原来是不能这么写,赋值的时候得放到hooks钩子函数中:
import { useEffect } from 'react'
import { useModel } from 'umi'
const College = () => {
const [userId, setUserId] = useState<>(false)
const masterProps = useModel('@@qiankunStateFromMaster')
useEffect(() => {
if (masterProps && {
setUserId()
}
},[])
}