Question

我在使用eslint-plugin-react插件的反应组件中使用ESLint和箭头函数时遇到了一些问题。我刚刚做了这些命令：

npm i -g eslint eslint-plugin-react
eslint SignUpPage.jsx

这是SignUpPage：

/**
 * Created by jwilso37 on 4/5/2017.
 */

import React from 'react';
import SignUpForm from '../components/landing/SignUpForm.jsx';
import 'whatwg-fetch'


class SignUpPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            errors: {},
            user: {
                email: '',
                name: '',
                password: ''
            }
        };
    }

    /**
     * Change the user object.
     *
     * @param {object} e - the JavaScript event object
     */

    changeUser = (e) => {
        const field = e.target.name;
        const user = this.state.user;
        user[field] = e.target.value;

        this.setState({
            user
        });
    };

    /**
     * Handles processForm event and submits request to server.
     * @param e
     */
    processForm = (e) => {
        e.preventDefault();
        const form = document.querySelector('form');
        const formData = new FormData(form);

        fetch('/api/signup', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                this.setState({
                    errors: {}
                });
            }
            else {
                // returned > 300 status code
                response.json().then(j => {
                    const errors = j.errors ? j.errors : {};
                    errors.summary = j.message;
                    this.setState({
                        errors: errors
                    })
                })
            }
        })
    };


    /**
     * Render the component.
     */
    render() {
        return (
            <SignUpForm
                onSubmit={this.processForm}
                onChange={this.changeUser}
                errors={this.state.errors}
                user={this.state.user}
            />
        );
    }

}

export default SignUpPage;

但是eslint的输出很奇怪：

ubuntu@ETFly:/vagrant/client/src/containers$ eslint signuppage.jsx

/vagrant/client/src/containers/signuppage.jsx
  31:16  error  Parsing error: Unexpected token =

说=匿名函数上的changeUser符号是错误的吗？这是我的.eslintrc.json：

{
  "plugins": [
    "react"
  ],
  "settings": {
    "react": {
      "createClass": "createClass", // Regex for Component Factory to use, default to "createClass"
      "pragma": "React",  // Pragma to use, default to "React"
      "version": "15.0" // React version, default to the latest React stable release
    }
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "env": {
    "browser": true
  }
}

Answer 1

好的，我好像修好了。在我意识到我的JSX传播操作符不能正常工作之后，我用babel-eslint安装了npm i --save-dev babel-eslint。这让我觉得所有ES6的东西都搞砸了。所以现在我刚刚添加了babel-eslint解析器并将"parser": "babel-eslint"添加到.eslintrc.json文件的末尾，一切都很好！我想默认的eslint解析器不支持这些功能......

ESLint eslint-plugin-react箭头函数

1 个答案: