vue to react

Vue-to React

حاول تحويل مكون VUE (دعم JSX و SFC) لتفاعل المكون.

منذ V0.0.8 دعم SFC

معاينة لقطات الشاشة

تحويل مكون JSX:

تحويل مكون SFC:

ثَبَّتَ

المتطلبات الأساسية: node.js (> = 8.0) و NPM (> = 5.0)

 $ npm install vue - to - react - g

الاستخدام

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

أمثلة:

$ vtr -i my/vue/component

سيقوم الرمز أعلاه بتحويل my/vue/component.js إلى ${process.cwd()}/react.js .

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

سيقوم الرمز أعلاه بتحويل my/vue/component.js إلى my/vue/test.js .

هنا عرض تجريبي.

انتباه

القائمة التالية يجب أن تكون اهتمامًا عندما تستخدم Vue-to React لتحويل مكون Vue إلى مكون رد الفعل:

• لا تدعم ارتباط بناء جملة كائن الفئة وربط جملة صفيف الفئة

 // Not support 
< div v-bind : class = "{ active: isActive }" > </ div >
< div v - bind : class = "[activeClass, errorClass]" > < / div >

// support
< div v-bind : class = "classes" > </ div >
computed: {
    classes ( ) {
        // ...
        return your - classes ;
    }
}

// ...

// react component
// ...

render ( ) {
    const classes = your - classes ;
    return (
        < div class = { classes } > </ div > 
    )
}

• لا تدعم ربط بناء جملة كائن النمط وربط بناء جملة صفيف النمط

 // Not support 
< div v-bind : style = "{ color: activeColor, fontSize: fontSize + 'px' }" > </ div >
< div v - bind : style = "[baseStyles, overridingStyles]" > < / div >

// support
< div v-bind : style = "style" > </ div >
computed: {
    style ( ) {
        return {
            activeColor : 'red' ,
            fontSize : 30
        }
    }
}

// ...

// react component
// ...

render ( ) {
    const style = {
      activeColor : 'red' ,
      fontSize : 30
    } ;
    return (
        < div style = { style } > </ div > 
    )
}

• لا تدعم دعامة watch مكون VUE
• لا تدعم components مكونات VUE إذا كنت تقوم بتحويل مكون JSX. انظر نصيحة المكون. لكن components الدعم تدعم عندما تقوم بتحويل SFC.
• يدعم فقط توجيهات VUE المدمجة الجزئية (SFC): v-if ، v-else ، v-show ، v-for ، v-bind ، v-on ، v-text و v-html .
• لا تدعم اختصار V-bind و V-On Shorthand (SFC):

 // Not support
< div : msg = "msg" @ click = "clickHandler" > < / div >

// Support
< div v-bind : msg = "msg" v-on : click = "clickHandler" > </ div >

• لا تدعم التوجيهات المخصصة وتعبير المرشح (SFC).
• يدعم فقط طرق دورة الرفع الجزئية لمكون VUE. رسم خرائط لعلاقات الدورة على النحو التالي:

 // Life-cycle methods relations mapping
const cycle = {
    'created' : 'componentWillMount' ,
    'mounted' : 'componentDidMount' ,
    'updated' : 'componentDidUpdate' ,
    'beforeDestroy' : 'componentWillUnmount' ,
    'errorCaptured' : 'componentDidCatch' ,
    'render' : 'render'
} ;

• يجب أن يكون كل دعامة محسوبة وظيفة:

 // ...

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

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

// ...

• سيتم وضع دعامة محسوبة لمكون VUE في طريقة عرض مكون React:

 // 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 ;
}

// ... 

تطوير

1. شوكة
2. قم بإنشاء فرع الميزات الخاص بك (Git Checkout -B ميزة My-New-Feature)
3. ارتكب التغييرات الخاصة بك (GIT Complay -"أضف بعض الميزات")
4. ادفع إلى الفرع (Git Push Origin
5. إنشاء طلب سحب جديد

رخصة

يتم إصدار هذا الريبو تحت معهد ماساتشوستس للتكنولوجيا.