2015-01-31 7 views
13

Ich verwende eine Bibliothek namens react-forms in meiner React-App. Um besser zu verstehen, wie es funktioniert, habe ich den Code gelesen, aber es taucht immer wieder eine Konvention auf, die mich verwirrt. Hier ist der ES6/JSX Code:Fragezeichen (?) In ES6/JSX-Code verwenden

'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; 

Hinweis render(): ?ReactElement {}. Das ist der Teil, der mich verwirrt. Könnte jemand Anleitung geben, wo man mehr über diese Syntax erfahren kann? Ich habe viele Sackgassen über Google erreicht.

+0

Das ist nicht ES6 Syntax afaict. – Bergi

+0

@Bergi 'render():' ist Vanille JS Syntax? 'onChange()' auch? Ich dachte, etwas wie 'render: function() {...}' würde benötigt werden. – Miles

+1

Auch nicht, ja. Als FakeRainBrigand antwortete, sind die ':' und die folgende Deklaration für die Typprüfung. 'render() {...}' ist eine ES6-Methodendefinition. – Bergi

Antwort

16

Wenn Sie auf die package.json von reagieren Formen gehen, und sehen Sie die browserify Abschnitt:

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

stripTypes aktiviert ist. Es abstreift Dinge wie ?ReactElement, was bedeutet, es maybe eine ReactElement zurückgibt (und ansonsten null oder nicht definiert)

Die {target: {checked: boolean}} bedeutet e eine Zieleigenschaft hat, die eine geprüfte Eigenschaft hat, die ein boolean ist.

Dies sind Hinweise für die Flow type checker. Sie sehen auch @flow in einem Kommentar an der Spitze aller Dateien, die überprüft werden sollen. Ein Typprüfung ist ein Werkzeug - wie Einheitstests -, die Sie sicherer auf die Korrektheit Ihres Programms macht, ohne manuelle Tests. In vielen Fällen ersetzen diese kleinen Typanmerkungen Komponententests, die wir sonst schreiben würden.

Wenn Sie fließen in Ihrem Projekt verwenden und versuchen, so etwas wie zu tun:

<Checkbox /> 

Es würde Ihnen eine Art Fehler, da Wert und onChange Requisiten benötigt. Anders als bei der Überprüfung der Laufzeitrequisiten geschieht dies, ohne den Code tatsächlich auszuführen (oft, sobald Sie die Datei speichern).