在Vue中渲染React组件（跨技术栈渲染研究）

背景介绍

虽然在日常工作中很少会碰到跨技术栈的组件引用这种骚操作，但是不同项目组、甚至是一个集团的不同子公司之间还是有相互嵌入页面、组件的需求，本文主要为了解决这一问题。

方案介绍

经过一顿搜索，最终确定的方案是通过 web components 做中间层（兼容性查看 caniuse）。

但是这里有一个难题是，怎么把 react 或者 vue 组件转为 web components 以及怎么传入函数？这里推荐用字节跳动的 @magic-microservices/magic 仓库，它的就是为了解决上述问题的！

我们以 react 组件嵌入 Vue 为例：

创建 react 组件

mkdirreact-hello&&cdreact-helloyarnaddfather-build-D#用于构建react组件yarnaddreactreact-domtouchindex.js#创建index.js

#创建father-build的配置文件echo"exportdefault{entry:'./index.js',esm:'rollup'}">.fatherrc.js

//index.jsimportReact,{createElement}from'react';importReactDOMfrom'react-dom';//定义组件constHello=({name})=>{return<div>hello{name}</div>}//初始化exportfunctionbootstrap(){}//挂载exportfunctionmount(container,props){console.log(props)ReactDOM.render(createElement(Hello,props,null),container);}//更新exportfunctionupdated(attrName,value,container,props){ReactDOM.render(createElement(Hello,props,null),container);}

修改 package.json，增加 version 和 name：

{"name":"react-hello","version":"0.0.1","main":"./dist/index.esm.js","scripts":{"build":"father-build"},"dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"father-build":"^1.20.1"}}

执行 yarn build && yarn link 进行全局链接。

Vue 项目渲染 React 组件

yarncreate@vitejs/appmy-vue-app--templatevue

安装如下内容：

yarnlink"react-hello"#链接组件yarnaddreactreact-dom#因为是打包为esmodule形式，所以这里需要安装依赖yarnadd@magic-microservices/magic#安装magic

修改 main.js：

import{createApp}from'vue'importAppfrom'./App.vue'importmagicfrom'@magic-microservices/magic';import*asReactHellofrom'react-hello';//全局注册组件magic('react-hello',ReactHello,{//这里很重要，webcomponents要求一定要显示声明属性propTypes:{name:String},});createApp(App).mount('#app')

修改 vite.config.js：

import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue({template:{compilerOptions:{//将所有包含短横线的标签作为自定义元素处理isCustomElement:tag=>tag==='react-hello'}}})]})

修改 App.vue

<template><react-helloname="react"></react-hello></template>

DEMO 链接为：cross-stack

完结撒花 ✿✿ヽ(°▽°)ノ✿