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'),
)
例子:在 React 16 上调用 React 17 组件
github.com/efoxTeam/em…
github.com/efoxTeam/em…
分别 yarn && yarn dev 启动
作者
Benny Shi |