未捕获的不变冲突:元素类型无效(react、webpack、循环导入)

首先，我想说的是，我是javascript和反应世界的新手，如果我的问题很琐碎，但我无法解决这种情况，请提前表示抱歉。如果需要，我会更新帖子

我想将当前的应用程序迁移到单页应用程序。我有三个主页PageA、PageB和PageC（在react中，我有3个主要组件）。我希望能够在这3个页面/组件之间切换。假设我有这个LogoText，它是代表网站徽标的组件。我想在所有其他组件（包括PageA）中都有它，当我点击它时，我想呈现主页（PageA）。

因此，我尝试使用react和webpack构建it。在下面给出的这个简单例子中，我有一个主页组件MainPage.js，它是主页中所有组件的父组件，还有一个LogoText组件，当有人点击它时，它应该呈现MainPage组件。当所有这些组件都在一个文件中，并且我不使用require（）时，一切都很正常，但当我使用require（将应用程序分解为模块并用webpack打包时，我会有奇怪的行为。我可以加载MainPage组件，LogoText组件在MainPage中正确显示，但当我单击LogoText时，我会得到"未捕获的不变违规：元素类型无效"异常（点击屏幕截图）

第一个异常：
js:18798警告：react.createElement:type不应为null、undefined、boolean或number。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）

第二个异常：
js:18354未捕获的不变量冲突：元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件），但得到：object

我有以下3个班：

main.js:

var MainPage = require("./MainPage.js")
ReactDOM.render(
   <MainPage />,
   document.getElementById('content')
);

主页.js:

var LogoText = require("./LogoText.js")
var MainPage = React.createClass({
    render: function() {
        return (
            <div>
                Hello page,
                <LogoText />
            </div>
        );
    }
});
module.exports = MainPage;

LogoText.js

var MainPage = require("./MainPage.js")
var LogoText = React.createClass({
    changePage: function(e) {
        ReactDOM.render(
            <MainPage />,
            document.getElementById('content')
        );
    },
    render: function() {
        return (
            <span onClick={this.changePage}>logo</span>
        );
    }
});
module.exports = LogoText;

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="scripts/bundle.js"></script>
  </body>
</html>

更新1：这是我的webpack.config.js:

module.exports = {
    entry: "./src/scripts/main.js",
    output: {
        path: "./src/scripts",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" },
            { test: /.js$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony'},
        ]
    },
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};

很明显，我的直觉是正确的"我可以猜测这是因为循环require（）"。答案是："使用返回空对象的webpack进行循环导入"

我认为react router将是实现这一点的正确方法。我会尝试一下，稍后会在此处发布结果：）

更新1:
React路由器正是我正在寻找的。这正是解决我问题的教程。

相关内容

最新更新

热门标签：