指南
教程
配置
API
博客
指南
教程
配置
API
博客
简体中文

主子应用通信

props 通信

Modern.js 中，会将子应用包裹成一个 React 组件，直接通过给 React 组件传递 props 即可实现主应用和子应用通信的目的。

主应用：App.tsx
function App() {
  const { MApp } = useModuleApps();

  return (
    <div>
      <MApp count={100} />
    </div>
  );
}
子应用：App.tsx
function App(props) {
  console.log(props);
  return ...
}

子应用将会打印 {count: 0}，目前尚未支持子应用渲染响应式，及时在主应用上更改 count 的数据也不会触发视图更新

channel 通信

Garfish.channel 用于应用间的通信。它是 EventEmitter2 的实例

// 子应用监听登录事件
const App = () => {
  const handleLogin = userInfo => {
    console.log(`${userInfo.name} has login`);
  };

  useEffect(() => {
    window?.Garfish.channel.on('login', handleLogin);
    return () => {
      window?.Garfish.channel.removeListener('login', handleLogin);
    };
  });
};

// 主应用触发监听事件
api.getLoginInfo.then(res => {
  if (res.code === 0) {
    window.Garfish.channel.emit('login', res.data);
  }
});
,