Question

我是反应的学习者，遇到了一个我不知道如何解决的错误。

我首先在codepen上编写代码，它运行没有问题。这是我codepen的链接。将它导出到本地机器后，我设置了webpack来处理编译。我收到意外令牌的错误。

在阅读了这个标题的所有答案后，我仍然无法解决我的错误。我根据答案更新了我的webpack cofig文件，重新安装了依赖项，使用了其他几个反应样板（1，我目前正在使用这个，但我也试过了一些其他反应起动模板）。删除控制台指示的代码后，我还有另一个错误指向代码中的其他位置。

提前致谢。

这是我的代码。

webpack.config.js的一部分：

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
        presets: ['react', 'es2015']
    }
}

.babelrc：

{
    "presets": ["es2015", "react"],
    "env": {
        "development": {
            "presets": ["react-hmre"]
        }
    }
}

CommentList.js：

import React, { Component, PropTypes } from 'react'
import Comment from './Comment'

class CommentList extends Component {
    render() {
        const CommentNodes = this.props.data.map((comment)=>{
            return (
                <Comment author={comment.author} key={comment.id}>{comment.txt}<Comment/>
            )
        })
        return (
            <div className="commentList">
                <h2>Comments:</h2>
                {CommentNodes}
            </div>
        )
    }
}

CommentList.propTypes = {
    data: PropTypes.array.isRequired
}

export default CommentList

错误：

/Users/liulian/Documents/React-flux/react-boilerplate/src/components/commentBox/CommentList.js

22：9错误解析错误：意外的令牌

模块构建失败：SyntaxError：/Users/liulian/Documents/React-flux/react-boilerplate/src/components/commentBox/CommentList.js：意外的令牌（22：8）

指向以下代码行，从第21行开始到第25行：

CommentList.propTypes = {
    data: PropTypes.array.isRequired
}

export default CommentList

babel jsx SyntaxError：意外的令牌

0 个答案: