未捕获不变冲突：元素类型无效（react、webpack、循环导入）
首先，我想说，我是新来的JavaScript和反应世界所以提前抱歉，如果我的问题是微不足道的，但我不能弄清楚这种情况。如果需要，我会更新帖子。
我想将我当前的应用程序迁移到单页应用程序。我有3个主要页面PageA，PageB和PageC（在反应我有3个主要组件）。我希望能够在这3个页面/组件之间切换。假设我有这个标志文本，这是代表网站标志的组件。我想把它放在所有其他组件中（包括PageA），当我点击它时，我想渲染主页（PageA）。
所以我试图用反应和webpack构建一个it。在下面给出的这个简单的例子中，我有一个主页组件Main Page.js它是所有应该在主页中的组件的父组件，还有一个LogoText组件，当有人点击它时，它应该呈现Main Page组件。当所有这些组件都在一个文件中，我不使用要求（）时，一切都工作得很好，但是当我使用要求（）将我的应用程序分解成模块并用webpack打包时，我会有奇怪的行为。我可以加载Main Page组件，并且LogoText组件在Main Page中正确显示，但是当我单击LogoText时，我得到“未捕获的不变违规：元素类型无效”异常（单击屏幕截图）
第一个异常：
react.js:18798警告：React.create元素：类型不应为空、未定义、布尔或数字。它应该是一个字符串（对于DOM元素）或ReactClass（对于复合组件）。
第二个例外：
react.js:18354未捕获的不变违反：元素类型无效：预期字符串（对于内置组件）或类/函数（
我有以下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;
标识文本。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;
指数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']
}
};
共有1个答案
很明显，我的直觉是正确的，“我可以猜这是因为循环require（）。答案是：“循环导入，网页包返回空对象”我认为react路由器将是实现这一点的正确方法。我将尝试一下，稍后将结果发布到这里：）更新1:
React路由器正是我要搜索的。这正是解决我问题的教程。
-
我正在修补，试图实现简单的路由。我按照他们的示例中所写的方式键入代码（但不包括s）https://github.com/rackt/react-router#whats-看起来像。 我在浏览器中得到这个错误： 未捕获错误：不变违反：元素类型无效：预期字符串（用于内置组件）或类/函数（用于复合组件），但得到了：对象。 这就是我要做的。 我在页面上附加脚本，和我的代码在。还有和和jQuery（所有三个
-
在组件的呈现函数中，我有： 所有内容都显示良好，但单击 元素时，我会收到以下错误： 未捕获得错误：不变冲突：对象作为React子级无效（找到：具有键得对象{dispatchConfig,dispatchMarker,nativeEvent,target,currentTarget,type,eventPhase,bubbles,cancelable,timeStamp,defaultPrevent
-
我试图实现一个简单的功能，的一个按钮，它应该添加放置数组并显示在视图中，但我似乎得到了一个错误，请帮助 这是我的代码， 这是我得到的错误， 我是个新来的土生土长的人，所以我对此一无所知。
-
作为一个新的反应者，我被一些看似简单的事情所困扰。不知道我做错了什么。 我有一个组件BasicReactComponent。我喜欢这样： 我试图在我的主文件中调用它，如下所示： 我一直得到下面的错误
-
我有一个应用程序，当试图从异步函数内部使用useState钩子时出错。 这里是App.js 这里是错误 元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查的渲染方法。 index.js package.json 更新错误-删除！认证 元素类型无效：需要字符串（对于内置组件）或类/函数