React组件库如何在vue项目中使用

React 组件在 Vue 中使用的常见方案

这是一个很常见的跨技术栈复用场景,要在 Vue 项目中使用 React 组件库,通常有三类解决方案,不同复杂度和适用场景:

方案一:封装成 Web Components(推荐)

原理

把 React 组件库用工具打包成 Web Components(自定义元素) ,然后在 Vue 中像 <my-button /> 一样使用。

实现方式

  1. 使用 react-to-webcomponent@lit-labs/react 把 React 组件封装:

    javascript 复制代码
    import React from "react";
    import ReactDOM from "react-dom";
    import reactToWebComponent from "react-to-webcomponent";
    import { MyButton } from "react-component-lib"; // 你的 React 组件
    
    const WebMyButton = reactToWebComponent(MyButton, React, ReactDOM);
    customElements.define("my-button", WebMyButton);
  2. 在 Vue 项目中直接使用:

    xml 复制代码
    <template>
      <div>
        <my-button label="点击我"></my-button>
      </div>
    </template>
  3. 事件监听需要用 addEventListener

    xml 复制代码
    <template>
      <my-button id="btn"></my-button>
    </template>
    
    <script setup>
    import { onMounted } from "vue";
    
    onMounted(() => {
      document.getElementById("btn").addEventListener("onClick", () => {
        console.log("clicked");
      });
    });
    </script>

✅ 优点:跨框架最通用,不限 Vue/React/Svelte/Angular

❌ 缺点:事件传递 & v-model 绑定需要额外处理


方案二:在 Vue 中直接挂载 React 组件(适合少量组件)

原理

用一个 Vue 组件包裹 React 组件,内部通过 ReactDOM.render 渲染。

实现方式

创建一个 Vue wrapper:

xml 复制代码
<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import React from "react";
import ReactDOM from "react-dom";
import { MyButton } from "react-component-lib";

const el = ref(null);

onMounted(() => {
  ReactDOM.render(<MyButton label="点击我" />, el.value);
});

onBeforeUnmount(() => {
  ReactDOM.unmountComponentAtNode(el.value);
});
</script>

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

✅ 优点:简单,适合 1-2 个 React 组件快速接入

❌ 缺点:性能差,通信麻烦,不适合大规模


方案三:微前端方式接入(适合大规模、多个组件库)

如果 React 组件库是一个较完整的系统,可以直接通过 微前端 (如 QiankunwujieModule Federation)接入。

✅ 优点:完整保留 React 生态,不需要做额外适配

❌ 缺点:引入成本高,适合「子应用」级别

方案四:第三方库封装(例如 veaury

veaury 就是一个"react-in-vue / vue-in-react"的桥接库,可以让 Vue 组件直接写成:

xml 复制代码
<script setup>
import { applyReactInVue } from 'veaury'
import { MyButton } from 'react-component-lib'

const ReactMyButton = applyReactInVue(MyButton)
</script>

<template>
  <ReactMyButton label="点我" @onClick="handleClick" />
</template>
  • 优点:API 简单,支持双向通信、事件监听
  • 缺点:引入第三方库,社区体量较小

方案对比

方案 原理 适用场景 优点 缺点
Wrapper(手写 react-in-vue) 在 Vue 生命周期中用 ReactDOM.render 挂载 React 组件 临时接入 1--2 个 React 组件 简单直接,无额外依赖 通信麻烦,维护成本高
第三方桥接库(veaury 等) 提供 API(如 applyReactInVue)自动处理渲染与通信 长期、稳定地在 Vue 项目中用 React 组件 封装好,使用优雅,支持双向通信 依赖额外库,社区体量较小
Web Components 封装 react-to-webcomponent 等工具把 React 组件打包为 <my-button /> 大规模跨框架复用(React/Vue/Svelte/Angular) 通用性最好,跨框架无障碍 事件绑定和 v-model 需要额外处理
微前端接入 整个 React 子应用通过 Qiankun、wujie、Module Federation 接入 Vue 主应用 大型子系统(整套 React 功能) 保留完整 React 生态,边界清晰 引入成本高,适合系统级集成

建议选型

  • 零散/少量:Wrapper
  • 中长期维护:veaury
  • 大规模跨框架:Web Components
  • 完整子系统:微前端
相关推荐
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者2 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再3 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴3 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟4 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1234 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚4 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院4 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js