《三步搞定 React 跨版本调用 for 微前端 EMP》

0.前言

React 16 和 React 17 写法基本一致，但是不同版本导致 Hooks 冲突，所以需要进行跨版本适配。

1.安装

npm install @efox/react-diff-adapt 或 yarn add @efox/react-diff-adapt

2.在 emp-config 暴露 React 和 ReactDOM

    exposes: {
          './newReact': require.resolve('react'),
          './newReactDOM': require.resolve('react-dom'),
        },

3. 使用不同版本的 React 组件

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import Adapter from '@efox/react-diff-adapt'
ReactDOM.render(
  <>
    <div style={{backgroundColor: '#eee', padding: '20px'}}>
      <h2>React 16 Component: Hello!!</h2>
    </div>
    <Adapter
      newReactDOM={async () => (await import('子项目名/newReactDOM'))?.default}
      newReact={async () => (await import('子项目名/newReact'))?.default}
      importer={() => import('子项目名/components/Hello')}
      // any other props, passed to ModernComponent
      compiler={'emp'}
      framework={'react17'}>
      <h3>And these are children passed into it from the legacy app</h3>
    </Adapter>
  </>,
  document.getElementById('emp-root'),
)