vue to react 다운로드 -Vue vue to react 소스 코드 다운로드

vue to react

타사 구성 요소

1.0.0

다운로드

vue-to-react

VUE 구성 요소 (JSX 및 SFC 지원)를 반응 구성 요소로 변환하십시오.

V0.0.8 이후 SFC를 지원합니다

미리보기 스크린 샷

JSX 구성 요소 변환 :

JSX

SFC 구성 요소 변환 :

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 > 
    )
}

VUE 구성 요소의 watch 소품을 지원하지 않습니다
JSX 구성 요소를 변환하는 경우 VUE 구성 요소의 구성 요소 components 지원하지 않습니다. 구성 요소 팁을 참조하십시오. 그러나 SFC를 변환 할 때 components 소품을 지원하십시오.
v-if , v-else , v-show , v-for , V v-bind v-on , v-text 및 v-html : 부분 내장 VUE 지침 (SFC) 만 지원합니다.
V- 바인드 속도 및 V- 온 속도 (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 ;
}

// ...