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;
@empjs/vue2-adapter
0.0.1 • Public • PublishedReadme
Keywords
nonePackage Sidebar
Install
npm i @empjs/vue2-adapter
Repository
Homepage
Weekly Downloads
0
Version
0.0.1
License
MIT
Unpacked Size
8.61 kB
Total Files
6