侧边栏壁纸
博主头像
江祎铭博主等级

不知江月待何人

  • 累计撰写 176 篇文章
  • 累计创建 3 个标签
  • 累计收到 115 条评论
标签搜索

目 录CONTENT

文章目录

在Vue项目中使用React组件,在React项目中使用Vue组件

江祎铭
2023-04-23 / 0 评论 / 0 点赞 / 543 阅读 / 2,384 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-04-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

开发中遇到一个需求:在Vue项目中使用已经开发好的React组件。这里选择了使用vuera库来完成需求。下面记录一下使用的步骤(在Reat项目中使用Vue组件与此步骤类似)。

1. 安装vuera库

vuera库地址:https://www.npmjs.com/package/vuera

首先需要在Vue项目中安装vuera库,安装指令如下:

// 使用yarn安装插件
yarn add vuera

// 使用npm安装插件
npm i -S vuera

2. 安装依赖

由于我们需要在Vue中使用React组件,所以首先需要在项目中安装React,安装指令如下:

npm install --save react react-dom

在Vue中,是无法识别jsx语法的,所以需要安装依赖来识别react-jsx语法,安装指令如下:

npm install @babel/plugin-transform-react-jsx

安装完成之后,在babel.config.js文件中添加这个插件即可:

module.exports = {
  plugins: ["@babel/plugin-transform-react-jsx"]
};

3. 项目配置

接下来在项目中以插件的形式来引入并使用vuera库,我们需要在main.js中加入如下代码:

import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)

4. 使用组件

完成上述配置之后,就可以在Vue项目中引入并使用React组件了。

React组件代码如下:

import React from 'react'

function myReactComponent(props) {
  const { message } = props

  function childClickHandle() {
    props.onMyEvent('React子组件传递的数据')
  }

  return (
    <div>
      <h2>{ message }</h2>
      <button onClick={ childClickHandle }>向Vue项目传递React子组件的数据</button>
    </div>
  )
}

export default myReactComponent

Vue组件代码如下:

<template>
    <div>
        <h1>I'm a Vue component</h1>
        <my-react-component :message="message" @onMyEvent="parentClickHandle"/>
    </div>
</template>

<script>
    // 引入React组件
    import MyReactComponent from './myReactComponent'

    export default {
        components: {
            'my-react-component': MyReactComponent  // 引入React组件
        },
        data() {
            return {
                message: 'Hello from React!',
            }
        },
        methods: {
            parentClickHandle(data){
                console.log(data);
            }
        },
    }
</script>

这里我在一个Vue项目中引入了这个React组件,效果如下:
image.png
可以看到,这里实现了Vue到React组件的传值,并显示在了页面上。根据右上角的Chrome插件显示,这个项目中既使用到了Vue又使用到了React。

点击页面中的按钮,可以看到,数据从React子组件传递到了Vue中:
image.png
这样就简单实现了React和Vue组件之间的数据通信。

5. 其他使用方式

上面使用Vue插件的形式在Vue项目中嵌入了React组件,如果不想使用Vue插件的形式,还可以使用其他的两种形式来使用vuera库。

(1)使用wrapper组件

<template>
  <div>
    <react :component="component" :message="message" />
  </div>
</template>
 
<script>
  import { ReactWrapper } from 'vuera'  // 引入vuera库
  import MyReactComponent from './MyReactComponent'  // 引入react组件
 
  export default {
    data () {
      component: MyReactComponent,
      message: 'Hello from React!',
    },
    components: { react: ReactWrapper }
  }
</script>

(2)使用高阶组件的API

<template>
  <div>
    <my-react-component :message="message" />
  </div>
</template>
 
<script>
  import { ReactWrapper } from 'vuera'  // 引入vuera库
  import MyReactComponent from './MyReactComponent'  // 引入react组件
 
  export default {
    data () {
      message: 'Hello from React!',
    },
    components: { 'my-react-component': ReactInVue(MyReactComponent) }
  }
</script>
0
广告 广告

评论区