2015-01-31 1 views
13

내 React 앱에서 react-forms라는 라이브러리를 사용하고 있습니다. 어떻게 작동하는지 더 잘 이해하기 위해 코드를 읽었지 만 컨벤션은 계속해서 나 혼란스러워합니다. 다음은 ES6/JSX 코드입니다.ES6/JSX 코드에 사용 된 물음표 (?)를 설명합니다.

'use strict'; 

var React = require('react/addons'); 
var cx = React.addons.classSet; 

var Checkbox = React.createClass({ 

    propTypes: { 
/...code.../ 
    }, 

    render(): ?ReactElement { 
    /...code.../ 
    }, 

    onChange(e: {target: {checked: boolean}}) { 
    /...code.../ 
    } 
}); 

module.exports = Checkbox; 

참고 render(): ?ReactElement {}입니다. 그것이 나를 혼란스럽게하는 부분입니다. 누군가이 구문에 대해 더 자세히 알 수있는 지침을 제공 할 수 있습니까? Google을 통해 많은 막 다른 골목에 휩쓸 렸습니다.

"browserify": { 
    "transform": [ 
     [ 
     "reactify", 
     { 
      "es6": true, 
      "target": "es5", 
      "stripTypes": true 
     } 
     ] 
    ] 
    }, 

stripTypes가 활성화되어 : 당신이 반응-형태의 package.json로 이동하여 browserify 섹션을 보면

+0

이것은 ES6 구문 afaict가 아닙니다. – Bergi

+0

@Bergi'render() :'는 바닐라 JS 구문입니까? 'onChange()'도 마찬가지입니까? 나는'render : function() {...}'과 같은 것이 필요할 것이라고 생각했다. – Miles

+1

아니, 그래. FakeRainBrigand가 대답 한대로,':'과 그 뒤에 오는 선언은 타입 검사를위한 것이다. 'render() {...}'는 ES6 메소드 정의입니다. – Bergi

답변

16

. 그것은

{target: {checked: boolean}}e 부울 인 체크 특성을 갖는 타겟 속성을 갖는 의미 ReactElement (달리 null 또는 정의)를 반환 maybe을 의미 ?ReactElement 등의 작업을 스트립.

이들은 Flow type checker에 대한 힌트입니다. 또한 입력해야하는 모든 파일의 맨 위에있는 주석에 @flow이 표시됩니다. 유형 검사기는 수동 테스트가 필요하지 않은 방식으로 프로그램의 정확성을 더욱 확신하게 만드는 도구와 같은 단위 테스트입니다. 대부분의 경우 작은 형식의 주석은 우리가 달리 쓰는 단위 테스트를 대체합니다. 값과 onChange가이 소품을 요구하고 있기 때문에 그것은 당신에게 유형의 오류를 줄 것이다

<Checkbox /> 

: 프로젝트에서 흐름을 사용하고 그런 짓을하려고하면

. 런타임 소품 수표와 달리 실제로 코드를 실행하지 않고도 파일을 저장하자마자 발생합니다.