---

实际项目开发中，有个业务场景需要用到其他组的组件，组件是基于react实现的，但我们的技术栈是vue，单纯为了这个组件去换技术栈成本太高，也不利于后续的统一维护和管理。

所以研究了下怎么在vue项目中使用react组件，在调研了之后发现GitHub上有个库vuera可以实现，但需要提醒的是这个库2020年之后就没有再更新了，所以基于vue3.0创建的项目是不能使用的。虽然最后因为一些原因并没有采用但还是记录下这个库的用法。

一、安装依赖

npm intall -S vuera react react-dom
npm install @babel/plugin-transform-react-jsx -D 

二、项目修改

1.babel.config.js

Vue项目中是无法识别jsx语法的，所以需要安装依赖并配置来识别react-jsx语法

代码如下：

module.exports = {
	plugins: ["@babel/plugin-transform-react-jsx"]
}

2.main.js

在main.js中引入并使用vuera库中

代码如下：

import { VuePlugin } from 'vuera'

Vue.use(VuePlugin)

三、使用组件

完成上述配置后，就可以在你的项目中使用react组件了，具体代码如下：
React组件代码如下：

import React from 'react'

function reactComponent(props) {
  const { message } = props

  return (
    <div>
      <h2>{ message }</h2>
    </div>
  )
}

export default reactComponent

vue组件代码如下：

<template>
    <div>
        <h1>this is react component</h1>
        <react-component :message="message" @onMyEvent="parentClickHandle"/>
    </div>
</template>

<script>
// 引入React组件
import ReactComponent from './ReactComponent.jsx'

export default {
  components: {
    'react-component': ReactComponent
  },
  data () {
    return {
      message: 'Hello from React!'
    }
  },
  methods: {
  }
}
</script>

这样就可以在你的vue项目中使用react组件了，运行后在网页上可以看到效果