qiankun整合react18报错记录-1

原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包), 但是我没有导入

现在用root的unmount方法取代

修改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')
  )
}

切换正常