如何将 Vue 组件转成 React 组件?

如何将 Vue 组件转成 React 组件?

技术杂谈小彩虹2021-11-01 7:50:03360A+A-

npm-version license js-standard-style

vue-to-react

Try to transform Vue component(jsx syntax) to React component.

It is under developing, so it's not stable now. The 1st stable version will come soon and be released v1.0.0.

Preview screenshots

image

Install

Prerequisites: Node.js (>=8.0) and NPM (>=5.0)

$ npm install vue-to-react -g

Usage

Usage: vtr [options]

Options:

  -V, --version     output the version number
  -i, --input       the input path for vue component
  -o, --output      the output path for react component, which default value is process.cwd()
  -n, --name        the output file name, which default value is "react.js"
  -h, --help        output usage information

Examples:

$ vtr -i my/vue/component

The above code will transform my/vue/component.js to ${process.cwd()}/react.js.

$ vtr -i my/vue/component -o my/vue -n test

The above code will transform my/vue/component.js to my/vue/test.js.

Here is a demo.

Attention

The following list you should be pay attention when you are using vue-to-react to transform a vue component to react component:

  • Only supprts jsx syntax of vue component, don't support SFC . See jsx in vue
  • Not support watch prop of vue component
  • Not support components prop of vue component. See component tip
  • Only supports partial lift-cycle methods of vue component. Lift-cycle relations mapping as follows:
// Life-cycle methods relations mapping
const cycle = {
    'created': 'componentWillMount',
    'mounted': 'componentDidMount',
    'updated': 'componentDidUpdate',
    'beforeDestroy': 'componentWillUnmount',
    'errorCaptured': 'componentDidCatch',
    'render': 'render'
};
  • Each computed prop should be function:
// ...

computed: {
    // support
    test () {
        return your-computed-value;
    },

    // not support
    test2: {
        get () {},
        set () {}
    }
}

// ...
  • Computed prop of vue component will be put into the render method of react component:
// vue component
// ...

computed: {
    // support
    test () {
        this.title = 'messages'; // Don't do this, it won't be handle and you will receive a warning.
        return this.title + this.msg;
    }
}

// ...

// react component
// ...

render () {
    const test = this.state.title + this.state.msg;
}

// ...

Development

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

LICENSE

This repo is released under the MIT.

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们