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

您好，因为您的组件定义错误，可能如下所示类Nav扩展了React.Component或var Nav = React.createClass（{ render：function（）{ 回来（

导航组件

）; } }）

React嵌套模块显示“Uncaught ReferenceError：Nav not defined”

2 个答案:

导航组件