我已经按照webpack上的主要教程进行了操作,并且我已经启动并运行了服务器.当我更改文件时,它会在保存时更新,一切都很好.然而,我然后介绍了React,这一切都出了问题.
首先,我在浏览器中收到此错误:
Unexpected token <
You may need an appropriate loader to handle this file type.
这指向我的entry.js文件中的第4行:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
这是index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id ="content"></div>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
webpack.config.js:
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: …这是我的问题,我有一个列表正在呈现并返回如下所示:
return (
<li className="itemsInList">{this.props.children}</li>
)
但我想添加一个复选框,如果我这样做:
return (
<input type="checkbox" className="itemsInList">{this.props.children}</input>
)
但随后会显示错误: arning: input is a void element tag and must not have children
如何解决此错误以在带有复选框的列表中显示它们？