在React中融合Vue项目

Posted 2023-03-28

参考技术A 如图所示，我们需要做的就是：

这里实际上就是实现了一个订阅发布规则，每当状态改变，我们就会通知观察者，观察者执行相应的操作。

到这里，我们实现了状态树的注册。

对于React的路由跳转，则可以借助于dva的subscriptions，例如：

到此为止，我们已经可以在两个框架的路由之间任意跳转。并且状态树之间的也做到了共享。

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

参考技术A

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

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

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

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

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

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

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

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

npm i -S vuera
npm install --save vue