通过vueReslover中间层创建用以加载react组件的vue组件

 import React from 'react';
      import ReactDOM from 'react-dom';
      import VueWrapper from '.!vueConstructer';
      const makeReactContainer =Component => {return class ReactInVue extends React.Component {static displayName =` ReactinVue$ (Component.displayName || Component.name ||'Component'}`;

      constructor(props)

{ super(props); this.state ={....props, }; }

vueChildren(children) {return {render: h=> h('div', children), ; }};
render(){
   const {
    children,
    invoker,
    ...rest}= this.state;

   const vueChildren = this.vueChildren(children); return ( <Component{...rest}> {children &&<VueWrapper component={vueChildren}/>}
   </Component> ); };};};
   export default {
     props: ['component', 'passedProps'],
     render(h) { return h('div', {ref:'react' });} ,
     methods:
     {mountReactComponent(h) {
      const Component = makeReactContainer(h);
      const children = this.$slots.default ||{}；
      ReactDOM.render( <component ref={ref =>{return this.cRef = ref;}}{...this.$props.passedProps}{...this. $attrs}{...this.$listeners}{...children}/>
      ,this.$refs.react);},},

    beforeDestroy(){ ReactDOM.unmountComponentAtNode(this.$refs.react); },
    mounted() {
      this.mountReactComponent( this. $props.component); 
    }
    updated() {
    if (this.$slots.default !== undefined)  { 
      this.cRef.setState({children: this. $slots.default}); } 
    else { this.cRef.setState({ children: null }); }
    } , 
    inheritAttrs: false,

    watch:{ 
      $attrs:{
         handler() { this.cRef.setState({ ..this.$attrs}); , deep: true, },
      '$props.component':{handler(component)this.mountReactComponent(component);}, 
    },
       $listeners: fhandler()
      { this.cRef.setState({ ..this. $listeners });}

    deep: true,
    }, 
    ' $props.passedProps': {handler() {this.cRef.setState({ ...this.$props.passedProps });},
    deep: true,}

首先、导入了 React 和 ReactDOM 库，以及自忘义的 Vuelrapper 组件。
定义了一个名为 makeReactContainer 的函数，该函数接受一个 Feact 组件作为参数，并返回一个ve组件。这个函数的作用是将 React 组件转换为 vue组件。件。我们使用 this.state 对象中的 children 和rest 属性来决定是否渲染 Vue 组件。
makeReactContainer 函数的使用方式如下：在 ReactlnVue 类中，我们扩展了
React.Component类。这个类将 Vue 组件与React 组件混合使用。displayName 属性用于设置 React 组件的显示名称。
在 ReactInVue 类的 constructor 方法中，我们设置了组件的状态，并将传入的 props 对象合并到状态对象中。
vueChildren 方法用于将 Vue 组件的 children 转换为适合在 React 组件中使用的形式。这个方法返回一个对象，其中包含一个 render 方法，该方法用于渲染 Vue 组件。
render 方法用于渲染 React 组件。在这个方法中，我们首先渲染 Vue 组件，然后渲染 React 组件。我们使用 this.state 对象中的 children 和rest 属性来决定是否渲染 Vue 组件。
makeReactContainer 函数的使用方式如下：
makeReactContainer(VueComponent);或者class ReactComponent extends React.Component { //…｝
在 Vue 组件的 mounted 生命周期钩子中，我们调用 mountReactComponent 方法来渲染和挂载
React 组件。
mountReactComponent 方法中，我们使用
ReactDOM.render 方法来渲染和挂载 React 组件。这个方法接受一个 ref 和 props 对象作为参数，并将它们设置为 React 组件的引用和属性。
updated 生命周期钩子中，我们检查
Sslots.default 是否发生变化，并将其设置为
React 组件的状态。
inheritAttrs 属性设置为 false，以便在 Vue 组件中正确显示 React 组件的属性。
使用 watch 选项来监听 Vue 组件的属性、props
和事件，并在它们发生变化时更新 React组件的状态。