Communicate#

Props#

In Modern.js, the sub-application will be wrapped into a React component, and the purpose of communicating between the main application and the sub-application can be achieved directly by passing'props' to the React component.

function App() {
  const { MApp } = useModuleApps();

  return (
    <div>
      <MApp count={100} />
    </div>
  );
}

function App(props) {
  console.log(props);
  return ...
}

The child application will print {count: 0}. Currently, child application rendering responsiveness is not supported. Changing the data of'count 'on the main application in time will not trigger a view update

channel#

[Garfish.channel] (https://www.garfishjs.org/api/channel) Used for communication between applications. It is an instance of EventEmitter2.

// sub app listen login event
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);
    };
  });
};

// main app emit login event
api.getLoginInfo.then(res => {
  if (res.code === 0) {
    window.Garfish.channel.emit('login', res.data);
  }
});