当我测试运行起反应时,会出现此错误
我的文件夹结构很简单,如下所示：
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()：无效的组件元素……出现了.我做错了什么？
ReactDOM.render将React类的实例作为其第一个参数.你直接传递了一个类.
原文链接：https://www.f2er.com/react/300916.html而不是
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>
