React组件rtc-device-detector-react在vue项目中的使用

背景介绍：最近在做一个音视频项目，需要检测网络和设备,因此就用到了rtc-device-detector-react组件，但是rtc-device-detector-react是基于react编写的(我的项目是vue项目),那怎么办呢？具体方法如下：

1、安装vuera插件

vuera插件地址：www.npmjs.com/package/vue…

npm install vuera --save

2、安装依赖

rtc-device-detector-react库地址：www.npmjs.com/package/rtc…

npm install rtc-device-detector-react
npm install @babel/plugin-transform-react-jsx

由于rtc-device-detector-react的package.json里有react、react-dom,所以安装了rtc-device-detector-react之后就连带着这两个组件都安装了

又因为vue无法识别jsx语法，因此需要安装@babel/plugin-transform-react-jsx依赖来识别jsx语法

3、修改配置

在在babel.config.js或.babelrc文件中如下配置@babel/plugin-transform-react-jsx插件：

plugins: ["@babel/plugin-transform-react-jsx"]

4、使用组件

(1)、在main.js中使用vuera插件，如下：

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

(2)、vue组件代码如下：

<template>
   <div>
       <Detector/>
   </div>
</template>

<script>
   // 引入React组件
   import Detector from './detector'

   export default {
       components: {
          Detector
       }
   }
</script>

detector.js代码如下：

import DeviceDetector from 'rtc-device-detector-react';
import 'rtc-device-detector-react/dist/index.css';
import React, { useEffect, useState } from 'react';
import { SDKAPPID } from './app/config';
import { getLatestUserSig } from './app/index';
console.log("useState=",useState)
function Detector() {
  const [networkDetectInfo, setNetworkDetectInfo] = useState({});
  console.log("networkDetectInfo=",networkDetectInfo)
    console.log("setNetworkDetectInfo=",setNetworkDetectInfo)
  const [visible, setVisible] = useState(true);
  useEffect(() => {
    const uplinkUserId = 'uplink_test';
    const { userSig : uplinkUserSig } = getLatestUserSig(uplinkUserId);
    const downlinkUserId = 'downlink_test';
    const { userSig : downlinkUserSig } = getLatestUserSig(downlinkUserId);
    const roomId = 999999;
    console.log('uplinkUserSig',uplinkUserSig)
    const networkDetectInfo = {
      sdkAppId: SDKAPPID,
      roomId,
      uplinkUserInfo: {
        uplinkUserId,
        uplinkUserSig,
      }
    }
    setNetworkDetectInfo(networkDetectInfo);
  }, []);
  return (
    <div>
      <DeviceDetector
        visible={visible}
        onClose={() => setVisible(false)}
        networkDetectInfo={networkDetectInfo}></DeviceDetector>
    </div>
  );
}

export default Detector;

最终效果如图所示：

参考链接：
在Vue项目中使用React组件
如何在Vue中嵌入React组件？如何在React中嵌入Vue组件？