2015-01-31 2 views
13

Sto usando una libreria chiamata moduli di reazione nella mia app React. Per capire meglio come funziona ho letto il codice, ma continua a comparire una convenzione che mi confonde. Ecco il codice ES6/JSX:Spiegare il punto interrogativo (?) Utilizzato nel codice 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; 

Nota render(): ?ReactElement {}. Questa è la parte che mi sta confondendo. Qualcuno potrebbe offrire indicazioni su dove saperne di più su questa sintassi? Ho colpito un sacco di vicoli ciechi tramite Google.

+0

Questo non è un sintassi ES6. – Bergi

+0

@Bergi 'render():' è la sintassi JS vanilla? anche 'onChange()'? Ho pensato qualcosa come 'render: function() {...}' sarebbe stato necessario. – Miles

+1

Neanche, si. Come ha risposto FakeRainBrigand, ':' e la seguente dichiarazione sono per il controllo del tipo. 'render() {...}' è una definizione del metodo ES6. – Bergi

risposta

16

Se si va al package.json di reagire forme, e guardare la sezione browserify:

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

stripTypes è abilitato. Si estrae cose come ?ReactElement, il che significa che maybe restituisce un ReactElement (e altrimenti null o undefined)

Il {target: {checked: boolean}} mezzi e ha una proprietà target, che ha una struttura controllata che è un booleano.

Questi sono suggerimenti per lo Flow type checker. Vedrai anche @flow in un commento nella parte superiore di tutti i file che dovrebbero essere controllati. Un type checker è un test unitario simile a uno strumento - che ti rende più sicuro della correttezza del tuo programma, in un modo che non richiede test manuali. In molti casi quelle piccole annotazioni di tipo sostituiscono i test unitari che altrimenti scriveremo.

Se si utilizza il flusso nel progetto e cercare di fare qualcosa di simile:

<Checkbox /> 

Si darebbe un errore di tipo perché il valore e onChange sono oggetti di scena necessari. A differenza del controllo degli oggetti di scena, ciò accade senza eseguire effettivamente il codice (spesso non appena si salva il file).