获取解析错误 <this.props.activeRouteHandler/>答案

【问题标题】：Getting Parse Error <this.props.activeRouteHandler/>获取解析错误 <this.props.activeRouteHandler/>
【发布时间】：2014-09-21 14:02:47
【问题描述】：

知道如何让react-router 与 ReactJS 一起工作吗？

对我来说，它在浏览器控制台中抛出错误。我的代码如下。我安装了npm react-router 并使用了一个基本服务器，即python -m SimpleHTTPServer 3000，它适用于没有路由器代码的 React 应用程序。

控制台错误为Uncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

我认为我的 app.js 找不到 react-router 模块，但可能是 RequireJS 问题（我将它从 CDN 包含在我的索引中）???

Directories
/index.html
/scripts/app.js
/node_modules/react-router

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>

  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx" src="scripts/app.js"></script>

  </body>
</html>

app.js

/** @jsx React.DOM */

var Routes = require('../node_modules/react-router/modules/main').Routes;
var Route = require('../node_modules/react-router/modules/main').Route;
var Link = require('../node_modules/react-router/modules/main').Link;

var About = React.createClass({
  render: function() {
    return <h2>About</h2>;
  }
});

var Users = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Users</h2>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

var User = React.createClass({
  render: function() {
    return <div>{this.props.params.userId}</div>
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="users">Users</Link></li>
          <li><Link to="user" userId="123">User 123</Link></li>
        </ul>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

React.renderComponent((
  <Routes>
    <Route handler={App}>
      <Route name="about" handler={About}/>
      <Route name="users" handler={Users}>
        <Route name="user" path="/user/:userId" handler={User}/>
      </Route>
    </Route>
  </Routes>
), document.body);

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当我升级到 react-router 0.5 时遇到了同样的问题，我什至使用了 react 0.11。我改为 {this.props.activeRouteHandler()} 并开始工作。我将此标记为“待办事项”以进行研究。

无论你做什么，都不要放弃。效果很好！我们之前使用的是骨干路由器，与我们的旧设置相比，这个反应路由器真是太棒了！

此外，通过您的目录设置，您可以将您的需求更改为“require('react')”，并使用 browserify 将您的应用程序和所需的依赖项构建到单个 js 资产中。其他一切看起来都不错。

【讨论】：

您需要升级 JSX 转换器，这是引发该错误的地方。 npm install --save reactify@0.14.x 假设您使用的是 browserify 转换
使用 Browserify & Reactify 现在我在浏览器中得到一个空白页面，React 没有呈现：browserify -t reactify app.js -o ../build/app-brow.js我的脚本标签现在是：<script type="text/javascript" src="build/app-brow.js"></script>
我使用python -m SimpleHTTPServer 3000 停止/启动了我的网络服务器以获得一个干净的开始。现在我得到了这个Uncaught Error: Invariant Violation: renderComponent(): Invalid component descriptor. This may be caused by unintentionally loading two independent copies of React.
啊，看起来您可能在 app.js 中丢失了“var React.require('react')”。由于您在 GitHub 上说过您正在使用 browserify 和 reactify，因此您可以删除 index.html 中的脚本标签。执行 browserify 后，您的输出应该包含所有代码以及所有必需的模块。查看您的输出文件以确保。
@Randy，是的，就是这样，我认为脚本标签可以工作，所以我可以从 CDN 加载 ReactJS。我猜这意味着使用 react-router 我无法从 CDN 加载 ReactJS？

【解决方案2】：

JSX 中的命名空间支持是在 React 0.11.0 中引入的。你有 0.10.0。将脚本标签更改为使用 0.11.0。

<script src="http://fb.me/react-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>

使用 0.10.0 及以下版本，您会这样做：

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />

【讨论】：

JSX 中的命名空间支持是什么意思？有任何 1 班轮快速解释。谢谢-))
我的意思是 <a.b.c> 被允许。