如何在Vue中嵌入React组件？如何在React中嵌入Vue组件？

日常在开发中总是会遇到各种奇怪的需求，
最近在开发一个多人合作的项目时变遇到一个奇怪的需求，
对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。

---

Vue中引用React组件：

1. 安装依赖

npm i -S vuera
npm install --save react react-dom

2. 编辑main.js:

import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)

3. 加入需要引用的react组件

import MyReactComponent from './MyReactComponent'

---

这个时候发现第一个问题：

1.png

不难发现，这是vue项目中未jsx文件格式的问题所导致
解决办法：
编辑webpack.base.conf.js，加入对jsx的支持

test: /\.(js|jsx)(\?.*)?$/

---

这个时候第二个问题出现了：

2.png

原因：
.babelrc文件中默认引入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。

解决办法：
npm install --save-dev babel-plugin-transform-react-jsx
并且在.babelrc文件中
用transform-react-jsx替换transform-vue-jsx

"plugins": ["transform-react-jsx"]

---

至此，我们便完成了在vue项目中引入react组件的目的
效果：

3.png

---

React项目中引用Vue组件：

1. 安装依赖

npm i -S vuera
npm install --save vue