Question

我有一些简单的路由设置，当所有代码都是内联时，它们工作得很好。但是，当我在一个不同的文件中分离一个类/组件并使用require引用它时，在浏览器中抛出以下异常：

type.toUpperCase is not a function

我正在使用react，react-router和browserify。代码如下：

app.js

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var Nav = require('./layout/Nav.js');
var Test = React.createClass({
    contextTypes: {
        router: React.PropTypes.func.isRequired
    },
    render: function render() {
        return (
        <div>
            <h2>Test</h2>
        </div>
        );
    }
});

var routes = (
        <Route name="App" path="/" handler={Nav}>
            <Route name="Test" handler={Test} />
        </Route>
);

Router.run(routes, Router.HashLocation, (Root) => {
    React.render(<Root/>, document.body);
});

Nav.js

var Nav = React.createClass({
    contextTypes: {
        router: React.PropTypes.func.isRequired
    },
    render: function render() {
        return (
            <div>
                <nav>
                    <ul>
                       <li><Link to="Home">Home</Link></li>
                    </ul>
                </nav>
                <RouteHandler/>
            </div>
        );
    }
});

以上代码在单个文件中全部内联时可以正常工作。为什么从单独的文件加载时会失败？如何修复？

Answer 1

乍一看，您似乎需要导出Nav。

var Nav = React.createClass({
  // ...
});

module.exports = Nav;

当类不是内联使用react时，'type.toUpperCase不是函数'

1 个答案: