'type.toUpperCase is not a function' 当 类 未使用 React 内联时
'type.toUpperCase is not a function' when classes aren't inline using react
我有一些简单的路由设置,当所有代码都是内联时它们工作得很好。但是,当我在另一个文件中分隔 class/component 并使用 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>
);
}
});
上面的代码在单个文件中全部内联时工作正常。
为什么从单独的文件加载时会失败?如何解决?
乍一看,您似乎需要导出 Nav
。
var Nav = React.createClass({
// ...
});
module.exports = Nav;
我有一些简单的路由设置,当所有代码都是内联时它们工作得很好。但是,当我在另一个文件中分隔 class/component 并使用 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>
);
}
});
上面的代码在单个文件中全部内联时工作正常。 为什么从单独的文件加载时会失败?如何解决?
乍一看,您似乎需要导出 Nav
。
var Nav = React.createClass({
// ...
});
module.exports = Nav;