Question

仍然很难简单地运行简单的反应应用程序（只是客户端来玩）。

构建正常（您可以看到config here, previous question）

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

未捕获错误：元素类型无效：预期a string（用于内置组件）或类/函数（用于复合组件）但得到：对象。你可能忘了导出你的来自其定义的文件中的组件。

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')
);

的index.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>

App.js ：

import React from 'react';
import ReactDOM from 'react-dom';
// import {render} from 'react-dom'; //didn't helped either

class App extends React.Component {
  render () {
    return (
      <div>
        <p> Hello React!</p>
      </div>
    );
  }
}

供参考：

答案是正确的，但也是一回事。不要忘记更改require上的所有import，例如此处（index.js）：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';

Answer 1

它告诉你究竟是什么问题：

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

将App.js更改为：

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

BTW，你为什么在app.js中的index.js和ES6导入中使用require？

React.createElement：类型在简单的空应用

1 个答案: