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

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

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

方案一：封装成 Web Components（推荐）

原理

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

实现方式

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

   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 项目中直接使用：

   <template>
     <div>
       <my-button label="点击我"></my-button>
     </div>
   </template>

3. 事件监听需要用 addEventListener：

   <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：

<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 组件库是一个较完整的系统，可以直接通过 微前端 （如 Qiankun、wujie、Module Federation）接入。

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

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

方案四：第三方库封装（例如 veaury）

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

<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
• 完整子系统：微前端