2017-02-03 3 views
3

flowtype을 Vue.js와 함께 사용하고 Vue.js에 대한 유형 선언을 추가했습니다. 그런 다음 JSX 구문을 babel-plugin-transform-vue-jsx와 함께 사용합니다.

JSX 태그를 VNode로 입력하려는 경우 flowtype 엔진은 JSX 태그를 React $ Element로 감지하므로 작동하지 않습니다.

flowtype 엔진이 JSX를 다른 유형으로 감지하는 방법을 알고 있거나이 문제를 해결하는 다른 좋은 방법을 알고있는 사람이 있습니까?

귀하의 도움이 필요합니다.

감사합니다.

전체 코드는 여기에 있습니다. https://github.com/kentrino/vue-js-webpack-flowtype-example

import style from './Test.css'; 

const test: ComponentOptions = { 
    render (h): VNode { 
    return <div><h1 class={style.red}>Yeah!! This is test.</h1></div> 
//   ^^^^^ React$Element. This type is incompatible with 
//   5: render (h: any): VNode { 
//         ^^^^^ VNode 
    }, 
    name: 'Test' 
} 
+0

작동합니다 동일 ... (React 이외의 라이브러리로 flowtype 및 JSX 사용) 내가 찾은 것을 알려 드리겠습니다. 그러나 여기에 답변이 없으면 우리에게 좋지 않을 수 있습니다. –

답변

1

당신은 흐름이 JSX을 유형 검사 동안 반응 이외의 것을 사용 할 수 있습니다. 그냥 파일의 상단에 @jsx 태그를 넣어 귀하의 경우에는

// @flow 
// @jsx somethingBesidesReact.createElement 

(I 오른쪽 흐름 태그 아래에 광산을 넣어), 당신은 단순히 h

로 변환하여 JSX를 변환하는 뷰와 babel-plugin-transform-vue-jsx 플러그인을 사용하는

https://github.com/vuejs/babel-plugin-transform-vue-jsx

따라서, 귀하의 경우,이 난을 시도하려고 해요

// @flow 
// @jsx h 
import style from './Test.css'; 

const test: ComponentOptions = { 
    render (h: any): VNode { 
    return <div><h1 class={style.red}>Yeah!! This is test.</h1></div> 
    }, 
    name: 'Test' 
} 

export default test; 
+0

감사합니다. 너무 많이! – Kentrino

관련 문제