ReactDOM.render()：无效的组件元素。不要传递组件类，而是确保通过将其传递给 React.createElement 来实例化它答案

【问题标题】：ReactDOM.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElementReactDOM.render()：无效的组件元素。不要传递组件类，而是确保通过将其传递给 React.createElement 来实例化它
【发布时间】：2016-03-29 07:54:25
【问题描述】：

当我测试运行 react 时出现此错误

我的文件夹结构很简单：

app folder
  index.html
  index.js
  home.js
webpack.config.js
dist folder
  bundle.js

index.html 看起来像这样

<!DOCTYPE html>
<html>
<head>
    <title>hello world app</title>
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src= "../dist/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

index.js 是这样的：

var React = require('react');
var ReactDOM = require('react-dom');
var Home = require('./Home');

ReactDOM.render( Home, document.getElementById('app'));

和 home.js 是这样的：

var React = require('react');
var Home = React.createClass({
    render: function(){
        return(
            <div> hello from home </div>
        )
    }
});
module.exports = Home;

我通过这个 webpack 配置运行编译代码：

module.exports = {
    entry:[
    "./app/index.js"
    ],
    output: {
        path: __dirname + '/dist',
        filename: "bundle.js"
    },
    module: {
        loaders : [
            {test: /\.js$/, exclude : /node_modules/, loader: "babel-loader", 
                query: {
                    presets: ['react']
                }
            }
        ]
    }
}

编译后，我运行文件 index.html。错误 ReactDOM.render(): Invalid component element... 出现了。我做错了什么？

【问题讨论】：

标签： reactjs

【解决方案1】：

ReactDOM.render 将 React 类的实例作为其第一个参数。你直接通过一个类。

所以不是

ReactDOM.render(Home, document.getElementById('app'))

尝试如下。

ReactDOM.render(React.createElement(Home), document.getElementById('app'));

或 JSX 对应的

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

另外，像下面这样写可能是个好主意。

<script src= "../dist/bundle.js"></script>

在页面底部，而不是在<head>，这样脚本就可以找到<div id="app"></div>。

【讨论】：

【解决方案2】：

你必须使用像

这样的渲染函数

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

【讨论】：