如何在Vue应用中使用React组件？Vue2.4无需安装React包实现交互

核心前提说明 #

无法在不安装React包的情况下使用React组件——React组件的渲染逻辑、生命周期运行完全依赖react和react-dom库，必须在Vue项目中安装这两个核心依赖：

npm install react react-dom
# 或使用yarn
yarn add react react-dom

如果是TypeScript项目，还需补充类型声明：

npm install @types/react @types/react-dom --save-dev

完整实现步骤 #

1. 封装React组件为Vue兼容的桥接组件 #

创建一个Vue组件作为中间层，负责处理Vue与React的通信、渲染同步：

<template>
  <div ref="reactRoot"></div>
</template>

<script>
import React from 'react'
import ReactDOM from 'react-dom'
import TargetReactComponent from './TargetReactComponent' // 导入你的React组件

export default {
  name: 'ReactBridge',
  props: {
    // 定义需要传递给React组件的props，与React组件的props结构一致
    reactProps: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      reactInstance: null // 存储React组件实例，用于调用其方法
    }
  },
  mounted() {
    // 将React组件渲染到Vue的DOM节点中
    const container = this.$refs.reactRoot
    this.reactInstance = ReactDOM.render(
      <TargetReactComponent
        {...this.reactProps}
        // 把React组件的事件通过Vue的$emit转发
        onCustomEvent={(data) => this.$emit('custom-event', data)}
      />,
      container
    )
  },
  watch: {
    // 监听props变化，实时更新React组件
    reactProps: {
      deep: true,
      handler(newProps) {
        ReactDOM.render(
          <TargetReactComponent
            {...newProps}
            onCustomEvent={(data) => this.$emit('custom-event', data)}
          />,
          this.$refs.reactRoot
        )
      }
    }
  },
  methods: {
    // 暴露调用React组件方法的接口
    invokeReactMethod(methodName, ...args) {
      if (this.reactInstance && typeof this.reactInstance[methodName] === 'function') {
        return this.reactInstance[methodName](...args)
      }
      console.warn(`React组件未找到方法：${methodName}`)
    }
  },
  beforeDestroy() {
    // 销毁React组件，避免内存泄漏
    ReactDOM.unmountComponentAtNode(this.$refs.reactRoot)
  }
}
</script>

2. 在Vue业务组件中使用桥接组件 #

直接引入封装好的桥接组件，完成Props传递、事件监听、方法调用：

<template>
  <div>
    <ReactBridge
      :react-props="vueToReactProps"
      @custom-event="handleReactEvent"
      ref="reactBridge"
    />
    <button @click="callReactFunc">调用React组件方法</button>
  </div>
</template>

<script>
import ReactBridge from './ReactBridge'

export default {
  components: {
    ReactBridge
  },
  data() {
    return {
      vueToReactProps: {
        title: '来自Vue的标题',
        desc: '从Vue传递给React的内容'
      }
    }
  },
  methods: {
    handleReactEvent(data) {
      console.log('接收React组件事件:', data)
    },
    callReactFunc() {
      // 调用React组件的自定义方法，示例为showModal
      this.$refs.reactBridge.invokeReactMethod('showModal', '弹窗内容')
    }
  }
}
</script>

3. 适配Vue通信的React组件示例 #

确保React组件支持接收Props，并能主动触发事件传递给Vue：

import React, { Component } from 'react'

class TargetReactComponent extends Component {
  // 供Vue调用的自定义方法
  showModal(content) {
    alert(`React组件弹窗：${content}`)
  }

  // 触发事件传递给Vue
  triggerEventToVue = () => {
    this.props.onCustomEvent({ msg: '来自React的消息' })
  }

  render() {
    const { title, desc } = this.props
    return (
      <div>
        <h2>{title}</h2>
        <p>{desc}</p>
        <button onClick={this.triggerEventToVue}>触发事件到Vue</button>
      </div>
    )
  }
}

export default TargetReactComponent

关键注意事项 #

• Vue 2.4对跨框架集成无特殊限制，只需确保React与Vue的运行环境无全局变量冲突。
• 保持ReactProps的不可变性，避免不必要的重渲染。
• 组件销毁时必须调用ReactDOM.unmountComponentAtNode，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Kermit