@empjs/adapter

配置

项目调用

import React, { useEffect, useState, version } from "react";
import ReactDOM from "react-dom";
// 引用runtime
import { empRuntime, withReactAdapter } from "@empjs/adapter";
// 实例化远程 emp
empRuntime.init({
  remotes: [
    {
      name: "mfHost",
      entry: `http://${process.env.lanIp}:8001/emp.js`,
    },
  ],
  name: "federationRuntimeDemo",
});
// 封装 React 18的组件 以便插入到 React 16
const RemoteApp = empRuntime.react.adapter(empRuntime.load("mfHost/App"));
// 创建 React 16 组件
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <div
      style={{
        border: "1px solid #eee",
        padding: "10px",
        background: "#f7f7f7",
      }}
    >
      <h1>React Version {React.version}!</h1>
      <button onClick={() => setCount(count + 1)}>Click Count {count}</button>
    </div>
  );
};
// 封装 React 16的组件 以便插入到 React 18
const ParentComponentAdapter = empRuntime.react.adapter(
  ParentComponent,
  "default",
  React,
  ReactDOM
);
//
const App = () => {
  return (
    <>
      <h1>app React Version {version}</h1>
      <RemoteApp component={ParentComponentAdapter} />
    </>
  );
};
export default App;