Это var {Route, Redirect, RouteHandler, Link} = Router; действителен в Javascript?

Что это значит в Javascript? Я нашел это в примерах реакции-маршрутизатора

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

Я получаю следующую ошибку, когда она запускается через браузер.

"Uncaught SyntaxError: Unexpected token {"

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

Esprima также дает ту же ошибку: http://esprima.org/demo/validate.html

Ответ 1

По-видимому, это называется назначением деструктурирования.

Из другого сообщения здесь:

{x, y} = foo;

эквивалентно

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

Это часть ECMAScript 6, а преобразование JSX Facebook имеет необязательный флаг, позволяющий транслировать выбранный синтаксис ES6 (включая деструктурирование) на ES5-совместимый синтаксис, который response-router использует.

Вот оригинальный пост с ответом Майка Кристенсена:

Что означают {фигурные скобки} вокруг имени переменной javascript

Ответ 2

Он работал после изменения моего кода на

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

Более подробную информацию об этом можно найти здесь: http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx

Ответ 3

Это файл JSX, а не JavaScript. Он был изобретен Facebook как часть React.js. Перед компиляцией он скомпилируется в файл JavaScript. В предыдущей команде был файл @jsx pragma: https://github.com/rackt/react-router/commit/3abe98444481598beef22d3af2bf01effc556c6b

JSX позволяет делать такие вещи:

// 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);

и этот

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

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