1

我正在使用带有 ES6 类的 react-router 并且它不断抛出错误

未捕获的类型错误:无法将类作为函数调用

它指的是默认路由的声明。大部分代码取自 react-router repo 中的示例,这就是为什么我想知道为什么它有问题。

import React from 'react';
import Router from 'react-router';

import {Header} from './components/Header.react.jsx';

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

var App = React.createFactory(React.createClass({
  render: function () {
    return (
      <div>
        <Header />
        <RouteHandler />
      </div>
    );
  }
}));


var Inbox = React.createClass({
  render: function () {
    return (
      <div>
        test
      </div>
    );
  }
});


var routes = (
  <Route name="app" path="/" handler={App}>
    <DefaultRoute handler={Inbox}/> // ERROR
  </Route>
);


Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});
4

1 回答 1

1

为什么App要用调用来包装组件创建createFactory

以下内容对我来说很好(我刚刚删除Header,因为它是外部的):

import React from 'react';
import Router from 'react-router';


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

var App = React.createClass({
  render: function () {
    return (
      <div>
        <RouteHandler />
      </div>
    );
  }
});


var Inbox = React.createClass({
  render: function () {
    return (
      <div>
        test2
      </div>
    );
  }
});


var routes = (
  <Route name="app" path="/" handler={App}>
    <DefaultRoute handler={Inbox}/> // ERROR
  </Route>
);


Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});
于 2015-03-31T19:57:36.770 回答