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 uses。

以下是Mike Christensen的回复原帖：

What do {curly braces} around javascript variable name mean

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

var {Route，Redirect，RouteHandler，Link} = Router;在Javascript中有效吗？

3 个答案: