首先需要在基座中注册子应用(registerMicroApps),注册需要有name名字、entry地址、container容器、activeRule激活路径、props传参等参数。 在子应用中监听state的变化(props.onGlobalStateChange),也可以修改state(props.setGlobalState)
基座接入子应用
registerMicroApps([
{ name: "micro-app1", // app name registered
entry: "//localhost:3011",
container: "#micro-app1",
activeRule: "/micro-app1",
props: { niceBody: "malena", age: 32 } },//传递的参数
]);
子应用接收参数
// @ts-ignore
export async function mount(props) {
console.log('[react16] props from main framework', props);
// render(props);
// @ts-ignore
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
// @ts-ignore
// props.setGlobalState(state);
}
子应用修改参数
props.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
// @ts-ignore
setTimeout(() => {
props.setGlobalState({...state, age: 36})
}, 2000);
});