Javascript React.createElement:简单空应用中的类型无效

仍然很难简单地运行SimpleReact应用程序（只需使用客户端）

构建正常（您可以查看配置）

运行服务器时-客户端出现错误：

未捕获错误：元素类型无效：应为 字符串（用于内置组件）或类/函数（用于复合 组件）但得到：对象。您可能忘了导出您的 组件，该组件来自定义它的文件

at invariant (transformed.js:304)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (transformed.js:11912)
at ReactCompositeComponentWrapper.performInitialMount (transformed.js:27510)
at ReactCompositeComponentWrapper.mountComponent (transformed.js:27401)
at Object.mountComponent (transformed.js:4158)
at mountComponentIntoNode (transformed.js:12676)
at ReactReconcileTransaction.perform (transformed.js:5756)
at batchedMountComponentIntoNode (transformed.js:12698)
at ReactDefaultBatchingStrategyTransaction.perform (transformed.js:5756)
at Object.batchedUpdates (transformed.js:29031)

代码如下：

index.js

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App.js');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

---

它准确地告诉你问题是什么：

您可能忘记了从定义组件的文件中导出组件

at invariant (transformed.js:304)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (transformed.js:11912)
at ReactCompositeComponentWrapper.performInitialMount (transformed.js:27510)
at ReactCompositeComponentWrapper.mountComponent (transformed.js:27401)
at Object.mountComponent (transformed.js:4158)
at mountComponentIntoNode (transformed.js:12676)
at ReactReconcileTransaction.perform (transformed.js:5756)
at batchedMountComponentIntoNode (transformed.js:12698)
at ReactDefaultBatchingStrategyTransaction.perform (transformed.js:5756)
at Object.batchedUpdates (transformed.js:29031)

将App.js更改为类似于：

// ...
export default class App extends React.Component {
// ...

---

---

顺便说一句，你为什么要在index.js中使用

require

，而在App.js中使用ES6 imports？

它准确地告诉你问题出在哪里：

您可能忘记了从定义组件的文件中导出组件

at invariant (transformed.js:304)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (transformed.js:11912)
at ReactCompositeComponentWrapper.performInitialMount (transformed.js:27510)
at ReactCompositeComponentWrapper.mountComponent (transformed.js:27401)
at Object.mountComponent (transformed.js:4158)
at mountComponentIntoNode (transformed.js:12676)
at ReactReconcileTransaction.perform (transformed.js:5756)
at batchedMountComponentIntoNode (transformed.js:12698)
at ReactDefaultBatchingStrategyTransaction.perform (transformed.js:5756)
at Object.batchedUpdates (transformed.js:29031)

将App.js更改为类似于：

// ...
export default class App extends React.Component {
// ...

---

---

顺便说一句，你为什么在index.js中使用

require

，在App.js中使用ES6导入？

wellp，我真的不习惯用ES6风格编写，强迫自己这样做，但有点不同-只是这个

未捕获的错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）但是得到：object。

没有提到我忘了导出smthyep，我在我的应用程序文件夹中得到了。然后你可以尝试用导入语句导入应用程序组件：

import app from./components/app.js

。哇，成功了。我将所有的

要求

更改为

导入

！但是为什么呢？嗯，我真的不习惯用ES6风格来写，强迫自己去做，但有点不同-只是这个

未捕获的错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到了：object。

没有提到这一点，我忘了导出smthyep，我进入了我的应用程序文件夹，然后你能用导入语句导入应用程序组件吗：

import app from./components/app.js

。哇，成功了。我将所有的

要求

更改为

导入

！但是为什么呢？