是 var { route, redirect, routeHandler, Link } = router;在 Jav

Is var { Route, Redirect, RouteHandler, Link } = Router; valid in Javascript?

本文关键字:router Jav routeHandler var route redirect Link      更新时间:2023-09-26

这在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

显然它被称为解构赋值。

来自这里的另一篇帖子:

{x, y} = foo;

相当于

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

这是 ECMAScript 6 的一部分,Facebook 的 JSX 转换有一个可选的标志,可以将选定的 ES6 语法(包括解构)转译为 ES5 兼容语法,而 react-router 使用这种语法。

这是迈克·克里斯滕森(Mike Christensen)回答的原始帖子:

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

将我的代码更改为

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

这是一个JSX文件,而不是JavaScript。它是由Facebook作为React.js的一部分发明的。它在执行之前被编译成一个JavaScript文件。该文件在上一次提交中@jsx杂注: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);