原index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
reportWebVitals();
let root
function render(props = {}) {
let { container } = props
root = ReactDOM.createRoot(
container ? container.querySelector('#root') : document.getElementById('root')
);
root.render(
<App />
);
}
// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
render({})
}
export async function bootstrap(props) {
console.log(1);
}
export async function mount(props) {
console.log(2);
// 如果没传props,会样式丢失掉!
render(props)
}
export async function unmount(props) {
let { container } = props
ReactDOM.unmountComponentAtNode(
container ? container.querySelector('#root') : document.getElementById('root')
)
}
报错!!! unmountComponentAtNode is not a function (此时从react微应用切换到其他应用会没反应)
原因: react 18 弃用了 unmountComponentAtNode 方法,不过好像还是有这个方法(在ReactDom包), 但是我没有导入
![](https://i-blog.csdnimg.cn/blog_migrate/51a647d6c614f67accac449533607fbc.png)
现在用root的unmount方法取代
![](https://i-blog.csdnimg.cn/blog_migrate/53c28f4db9d069a56b8c4ca8c1f0d75a.png)
修改index.js的unmount方法
export async function unmount(props) {
let { container } = props
// react17的!!! (已被弃用,但是依然可以从reactdom包里导入)
// ReactDOM.unmountComponentAtNode(
// container ? container.querySelector('#root') : document.getElementById('root')
// )
// react18!!!
root.unmount(
container ? container.querySelector('#root') : document.getElementById('root')
)
}
切换正常
![](https://i-blog.csdnimg.cn/blog_migrate/15d107d0204e72f97d40135c51ff36a8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/61131cf86dc9be9fd371b614b738d5c3.png)