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

日常在开发中总是会遇到各种奇怪的需求，

最近在开发一个多人合作的项目时变遇到一个奇怪的需求，

对方之前开发了一个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

1. 是存在兼容性问题的，VueH5在Safari浏览器中打开时，底部可能会出现遮罩的问题。

2. 这是因为Safari浏览器在处理移动端viewport时，会将虚拟键盘的高度也算在内，导致页面出现了底部遮罩。

3. 解决方法可以通过监听虚拟键盘的d出和关闭事件，根据实际高度来修改页面的高度，或者使用CSS hack，比如在body元素上添加样式“height: -webkit-fill-available”来解决这个问题。

---