如何在react中使用vue.js混合？

import React from 'react';
import Vue from 'vue';

const withVue = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      this.vueInstance = new Vue({
        el: '#vue-app',
        data: {
          message: 'Hello from Vue!'
        },
        template: `<div>{{ message }}</div>`
      });
    }

    componentWillUnmount() {
      this.vueInstance.$destroy();
    }

    render() {
      return (
        <div>
          <WrappedComponent {...this.props} />
          <div id="vue-app"></div>
        </div>
      );
    }
  };
};

export default withVue;

import React from 'react';
import withVue from './withVue';

const MyComponent = () => {
  return <div>React Component</div>;
};

export default withVue(MyComponent);

import Vue from 'vue';

const MyVueComponent = Vue.extend({
  template: `<div>{{ message }}</div>`,
  data() {
    return {
      message: 'Hello from Vue!'
    };
  }
});

const VueElement = document.registerElement('my-vue-component', {
  prototype: MyVueComponent.prototype
});

export default VueElement;

import React from 'react';
import VueElement from './VueElement';

const MyComponent = () => {
  return (
    <div>
      <p>React Component</p>
      <my-vue-component></my-vue-component>
    </div>
  );
};

export default MyComponent;