当前位置：首页 > React

vue项目如何集成react

2026-01-24 19:57:34React

在 Vue 项目中集成 React 的方法

可以通过微前端架构或直接嵌入 React 组件的方式实现 Vue 和 React 的混合开发。以下是两种常见的方法：

使用微前端框架（如 qiankun）

qiankun 是一个流行的微前端框架，支持 Vue 和 React 应用的混合集成。

主应用（Vue）配置
在主应用中安装 qiankun：

npm install qiankun

在 Vue 的入口文件（如 main.js）中注册 React 子应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react-app',
    entry: '//localhost:7100', // React 子应用的入口地址
    container: '#react-container', // 挂载节点
    activeRule: '/react',
  },
]);

start();

子应用（React）配置
在 React 项目中导出生命周期钩子，确保能被 qiankun 正确加载：

// public-path.js
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// index.js
import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';

function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.getElementById('root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {}
export async function mount(props) {
  render(props);
}
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

直接嵌入 React 组件

通过 @vue/babel-plugin-vue-jsx 和 react 依赖，直接在 Vue 中渲染 React 组件。

安装依赖
在 Vue 项目中安装 React 相关依赖：
```
npm install react react-dom @babel/preset-react
```

配置 Babel
在 babel.config.js 中添加 React 的预设：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-react'],
};

封装 React 组件
创建一个 Vue 组件来渲染 React 组件：

// ReactWrapper.vue
<template>
  <div ref="reactContainer"></div>
</template>

<script>
import React from 'react';
import ReactDOM from 'react-dom';

export default {
  props: {
    component: {
      type: Function,
      required: true,
    },
    props: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.renderReactComponent();
  },
  methods: {
    renderReactComponent() {
      ReactDOM.render(
        React.createElement(this.component, this.props),
        this.$refs.reactContainer
      );
    },
  },
  beforeDestroy() {
    ReactDOM.unmountComponentAtNode(this.$refs.reactContainer);
  },
};
</script>

在 Vue 中使用 React 组件
通过 ReactWrapper 组件加载 React 组件：

// App.vue
<template>
  <div>
    <ReactWrapper :component="ReactComponent" :props="{ message: 'Hello from React!' }" />
  </div>
</template>

<script>
import ReactWrapper from './ReactWrapper.vue';
import ReactComponent from './ReactComponent.jsx';

export default {
  components: { ReactWrapper },
  data() {
    return {
      ReactComponent,
    };
  },
};
</script>