Question

我使用带有ES6类的react-router并且它一直在抛出错误

未捕获的TypeError：无法将类作为函数调用

它指的是默认路由的声明。大部分代码都来自于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);
});

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

DefaultRoute抛出“无法将类作为函数调用”

1 个答案: