È var {Route, Redirect, RouteHandler, Link} = Router; valido in Javascript?

Question

Cosa significa in Javascript? ho trovato questo in reagire-router esempi

var { Route, Redirect, RouteHandler, Link } = Router; 

ottengo il seguente errore quando viene eseguito attraverso browserify.

"Uncaught SyntaxError: Unexpected token {" 

https://github.com/rackt/react-router/blob/master/examples/dynamic-segments/app.js

Esprima dà anche lo stesso errore: http://esprima.org/demo/validate.html

Answer 1

A quanto pare si chiama un incarico destrutturazione.

Da un altro post qui:

{x, y} = foo; 

è equivalente a

x = foo.x; 
y = foo.y; 

Questo fa parte di ECMAScript 6, e di Facebook JSX trasformare ha una bandiera opzionale per consentire transpiling selezionare sintassi ES6 (tra cui destrutturazione) alla sintassi compatibile con ES5, che react-router uses.

Ecco il post originale con risposta di Mike Christensen:

What do {curly braces} around javascript variable name mean

Answer 2

Questo è un file JSX, non JavaScript. È stato inventato da Facebook come parte di React.js. Viene compilato in un file JavaScript prima dell'esecuzione. Il file ha avuto pragma @jsx nel precedente commettere: https://github.com/rackt/react-router/commit/3abe98444481598beef22d3af2bf01effc556c6b

JSX permette di fare cose come questa:

// Using JSX to express UI components. 
var dropdown = 
    <Dropdown> 
    A dropdown list 
    <Menu> 
     <MenuItem>Do Something</MenuItem> 
     <MenuItem>Do Something Fun!</MenuItem> 
     <MenuItem>Do Something Else</MenuItem> 
    </Menu> 
    </DropDown>; 

render(dropdown); 

e questo

var HelloMessage = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

React.render(<HelloMessage name="John" />, mountNode); 

Answer 3

Ha funzionato dopo aver cambiato il mio codice di

var Route = Router.Route; 
var RouteHandler = Router.RouteHandler; 
var Link = Router.Link; 

Maggiori informazioni su questo si possono trovare qui: http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx