'type.toUpperCase不是函数'当类不是内联使用反应

我有一些简单的路由设置，当所有的代码都是内联时它们工作得很好。然而，当我在不同的文件中单独的一类/组件和使用需要引用它，但以下情况除外得到投掷在浏览器：'type.toUpperCase不是函数'当类不是内联使用反应

type.toUpperCase is not a function

我使用的反应，反应路由器和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> 
     ); 
    } 
});

此代码工作正常时，其所有内嵌在一个文件中。为什么从单独的文件加载时会失败，如何修复？

来源

2015-10-04 scripton

乍一看，它看起来像你需要出口Nav。

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

module.exports = Nav;

来源

2015-10-04 20:29:09 lukewestby

谢谢，这是诀窍！我一定在文档中忽略了这一点，因为大多数示例都有内联组件/类。 – scripton

太棒了！是的，将多个组件或函数放到一个文件中的例子可能会在实践中导致代码结构混乱。 – lukewestby

'type.toUpperCase不是函数'当类不是内联使用反应

回答

相关问题