在Vue项目中写React代码

上一次刚把旧的vue项目从纯js转换成js和ts混用，这次准备在这个vue项目中去写react代码

原本以为会是个很麻烦的事情，昨天下班回家路上还想了些思路。谁知道今天做的时候上网一搜发现有现成的库

github.com/akxcv/vuera

vue component中集成react component

直接使用这个类库里的例子先测试一下

// main.ts
import Vue from 'vue'
import { VuePlugin } from 'vuera'

Vue.use(VuePlugin)
/* ... */

// test.vue
<template>
  <div>
    <h1>Im a Vue component</h1>
    <my-react-component :message="message" @reset="reset" />
  </div>
</template>

<script>
  import MyReactComponent from './MyReactComponent'

  export default {
    data () {
      message: 'Hello from React!',
    },
    methods: {
      reset () {
        this.message = ''
      }
    },
    components: { 'my-react-component': MyReactComponent },
  }
</script>

// MyReactComponent.tsx
import React from 'react';

const App: React.FC = () => <div>my react component</div>;

export default App;

因为是ts项目，tsconfig.json文件里compilerOptions要加入这一行
{
  "compilerOptions": {
    "jsx": "react"
  },
}

试了一下发现确实没有问题

vue-router处理

不过项目中没有提供vue-router的使用方法，直接把react component放到router的component上是不可以的

解决方法是包一层vue component，写一个公用的wrapper方法是最方便的方法

//react-wrapper.js
import { ReactWrapper } from 'vuera';

export default function factoryReactWrapper(component) {
  return {
    components: { react: ReactWrapper },
    render(createElement) {
      return createElement('react', {
        props: {
          component
        },
      });
    }
  };
}

// router.config.js
import factoryReactWrapper from './react-wrapper'

{
    desc: '测试',
    path: '/test',
    component: factoryReactWrapper(MyReactComponent)
}

测试了一下是行得通的