vue代码和react代码互转（组件库同步）

背景

有些需要vue和react代码互转的场景

比如：组件库之间，相同功能的组件，在vue组件库和react组件库中同步一遍。或者一些模板代码，需要多个版本

手动去同步，数量多了后还是挺烦的。后面发现有工具可以转换！！ 此篇主要介绍一些转换工具（得注意一下优缺点和注意点，下面会列出来）

以下主要介绍这3种场景：（基本都有开源的工具，可以直接使用）

vue转react
react转vue
vue2转vue3

1. vue转react

github.com/mcuking/vue…

具体的使用，里面有文档
（在线浏览站点：http://122.51.132.117/vue2react/ ）

优点：

多多少少还是可以节省不少时间的

缺点：

因为开源库是几年前的，所以较新的api，是不支持的。比如hooks，函数式组件
可能会转换出一些过于老的，或废弃的api，需要开发者自己手动调整一下

注意：

如果转换失败，注意看报错。
实在看不明白报错的话，就把源代码一部分一部分注释掉，最终定位到错误位置。在看看修改一下，还是手动copy一下
tips：props处经常有问题（导致报错转换失败），还有一些vue独有的api，转换后需要开发者自己去处理，比如$emit（这个不会导致转换失败）

2. react转vue

github.com/vicwang163/…

转换前

import React, { Component } from 'react'

class App extends Component {
  constructor() {
    super();
    this.state = {
      hello: 'world'
    }
  }
  componentDidMount () {
    console.log(this.state)
  }
  myMethod () {
    this.setState({ hello: 'world' })
  }
  render() {
    return (
      <div className="App">
        <div className="App-header" onClick={this.myMethod}>
          <h2>
            Hello {this.state.hello}
          </h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}
export default App
复制代码

转换后

// export component
export default {
  name: 'app',
  data () {
    return {hello: 'world'}
  },
  methods: {
    myMethod () {
      this.hello = 'world'
    }
  },
  mounted () {
    console.log(this)
  },
  render () {
    return (
      <div class="App">
        <div class="App-header" onClick={this.myMethod}>
          <h2>Hello {this.hello}</h2>
        </div>
        <p class="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}
复制代码