onClick =（）=> {在gulp中引发意外的令牌错误

Question

I tried to integrate a react component in my React project. when transpiling with gulp I get an error on line onClick = () => {

js/expanding-animation.js: Unexpected token (14:16)

I am using gulp with babelfy and "presets": ["react", "es2016"]

ideas?

 import React, {Component} from 'react';

    const animationStyle = {
        transition: 'width 0.75s cubic-bezier(0.000, 0.795, 0.000, 1.000)'
    };

    const makeExpanding = (Target) => {
        return class extends Component {
            constructor(props) {
                super(props);
                this.state = {isOpen: false};
            }

            onClick = () => {
                this.setState({isOpen: !this.state.isOpen});
            };

            render() {
                return (
                    <Target {...this.props}
                            isOpen={this.state.isOpen}
                            onClick={this.onClick}
                            additionalStyles={{text: animationStyle, frame: animationStyle}}/>
                );
            }
        }
    };

    export default makeExpanding;

Answer 1

This is an experimental feature.

You need to add babel stage-2 or just to enable this specific feature you can add the following transformation: http://babeljs.io/docs/plugins/transform-class-properties/

{
    "presets": ["react", "es2016"],
    "plugins": [
        "transform-class-properties"
    ]
}