This repository was archived by the owner on Jan 14, 2025. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork69
🛠️ 👉 Try to transform Vue component to React component
License
NotificationsYou must be signed in to change notification settings
dwqs/vue-to-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🛠️ 👉 Try to transform Vue component(supportJSX andSFC) to React component.
Since v0.0.8 support SFC
Transform JSX Component:
Transform SFC Component:
Prerequisites:Node.js (>=8.0) andNPM (>=5.0)
$npminstallvue-to-react-g
Usage: vtr [options]Options: -V, --version output the version number -i, --input the input pathfor vue component -o, --output the output pathfor react component, which default value isprocess.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 transformmy/vue/component.js to${process.cwd()}/react.js.
$ vtr -i my/vue/component -o my/vue -ntestThe above code will transformmy/vue/component.js tomy/vue/test.js.
Here is ademo.
The following list you should be pay attention when you are using vue-to-react to transform a vue component to react component:
- Not supportclass object syntax binding andclass array syntax binding
// Not support<divv-bind:class="{ active: isActive }"></div><divv-bind:class="[activeClass, errorClass]"></div>// support<divv-bind:class="classes"></div>computed:{classes(){// ...returnyour-classes;}}// ...// react component// ...render(){constclasses=your-classes;return(<divclass={classes}></div>)}
- Not supportstyle object syntax binding andstyle array syntax binding
// Not support<divv-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><divv-bind:style="[baseStyles, overridingStyles]"></div>// support<divv-bind:style="style"></div>computed:{style(){return{activeColor:'red',fontSize:30}}}// ...// react component// ...render(){conststyle={activeColor:'red',fontSize:30};return(<divstyle={style}></div>)}
- Not support
watchprop of vue component - Not support
componentsprop of vue component if you are transforming a JSX component. Seecomponent tip. But supportcomponentsprop when you are transforming SFC. - Only supports partial built-in Vue directives(SFC):
v-if,v-else,v-show,v-for,v-bind,v-on,v-textandv-html. - Not support v-bind shorthand and v-on shorthand(SFC):
// Not support<div :msg="msg" @click="clickHandler"></div>// Support<divv-bind:msg="msg"v-on:click="clickHandler"></div>
- Not support custom directives and filter expression(SFC).
- Only supports partial lift-cycle methods of vue component. Lift-cycle relations mapping as follows:
// Life-cycle methods relations mappingconstcycle={'created':'componentWillMount','mounted':'componentDidMount','updated':'componentDidUpdate','beforeDestroy':'componentWillUnmount','errorCaptured':'componentDidCatch','render':'render'};
- Each computed prop should be a function:
// ...computed:{// supporttest(){returnyour-computed-value;},// not supporttest2:{get(){},set(){}}}// ...
- Computed prop of vue component will be put into the render method of react component:
// vue component// ...computed:{// supporttest(){this.title='messages';// Don't do this, it won't be handle and you will receive a warning.returnthis.title+this.msg;}}// ...// react component// ...render(){consttest=this.state.title+this.state.msg;}// ...
- Fork it
- Create your feature branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- Create new Pull Request
This repo is released under theMIT.
About
🛠️ 👉 Try to transform Vue component to React component
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published