React nested module shows "Uncaught ReferenceError: Nav is not defined"

Question

我已经开始学习ReactJs，我不知道如何调试它。我有一个基本的 app.jsx .

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
    document.getElementById('app')
);

我现在已经在我的 React 应用程序中编写了两个基本组件，并且嵌套了它们。

var React = require('react');

React.createClass({
    render: function () {
        return (
            <h2>Nav Component</h2>
        );
    }
})

module.exports = Nav;
var React = require('react');
var Nav = require('Nav');

var Main = React.createClass({
    render: function () {
        return (
            <div>
                <Nav/>
                <h2>Main Component</h2>
            </div>
        );
    }
});
module.exports = Main;

我用的是webpack

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        root: __dirname,
        alias: {
            Main: 'app/components/Main.jsx',
            Nav: 'app/components/Nav.jsx'
        },
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'] 
                },
                test: /\.jsx?$/,
                exclude:/(node_modules|bower_components)/
            }
        ]
    }
};

我没有收到任何错误，但浏览器什么也没显示。当我检查开发人员工具时，我看到 "Uncaught ReferenceError: Nav is not defined"。文件位于正确的文件夹中。我该如何解决？

谢谢

Answer 1

如果您提供的代码是准确的，问题在于您实际上并没有在导航文件中定义一个名为 Nav 的变量。您只是调用了 React.createClass 而没有将其分配给变量 Nav。然后您尝试在底部导出 Nav。将您的 createClass 调用分配给变量，它应该可以解决您的问题。

Answer 2

您好，您的组件定义有误，可能如下所示 class Nav extends React.Component 或 var Nav = React.createClass({ 渲染：函数（）{ return (

导航组件

); } })

React nested module shows "Uncaught ReferenceError: Nav is not defined"

React nested module shows "Uncaught ReferenceError: Nav is not defined"

javascript

reactjs

webpack-dev-server

导航组件