Question

首先，我想说我是javascript的新手，如果我的问题很简单，那么事先对此抱歉，但我无法弄清楚这种情况。如果需要，我会更新帖子。

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

所以我试图用反应和 webpack 来构建它。在下面给出的这个简单示例中，我有一个主页面组件MainPage.js，它是应该在主页面中的所有组件的父组件，以及当有人点击它时应该呈现MainPage组件的LogoText组件。当所有这些组件都在一个文件中并且我没有使用 require（）时，一切都运行得很好但是当我使用 require（）和包将我的应用分解为模块时它与 webpack 我的行为很奇怪。我可以加载MainPage组件，LogoText组件在MainPage中正确显示但是当我点击LogoText时，我得到“未捕获的不变违规：元素类型无效”异常（click for screenshot）

第一个例外：
react.js：18798警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）
第二个例外：
react.js：18354 Uncaught Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

我有以下3个班级：

main.js：

var MainPage = require("./MainPage.js")

ReactDOM.render(
   <MainPage />,
   document.getElementById('content')
);

MainPage.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']
    }
};

Answer 1

显然，我的直觉是正确的＆＃34;我可以猜测这是因为循环require（）＆＃34; 。答案在这里：＆＃34; circular imports with webpack returning empty object＆＃34;。

我认为react router将是实现这一目标的正确方法。我会尝试一下，我会在稍后发布结果:)

更新1：
React路由器正是我正在寻找的。 This is the exact tutorial that solved my problem

未捕获的不变违规：元素类型无效（反应，webpack，循环导入）

1 个答案: