javascript - 是 var { Route, Redirect, RouteHandler, Link } = 路由器；在 Javascript 中有效吗？

Question

这在 Javascript 中是什么意思？我在react-router示例中发现了这一点

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

通过browserify运行时出现以下错误。

"Uncaught SyntaxError: Unexpected token {"

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

Esprima 也给出了同样的错误： http ://esprima.org/demo/validate.html

Answer 1

显然它被称为解构赋值。

从这里的另一个帖子：

{x, y} = foo;

相当于

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

这是 ECMAScript 6 的一部分，Facebook 的 JSX 转换有一个可选标志，可以将选择的 ES6 语法（包括解构）转换为 ES5 兼容的语法，react-router 使用.

这是由 Mike Christensen 回答的原始帖子：

javascript变量名周围的{花括号}是什么意思

Answer 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

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