Arrow function is considered unexpected token in React component using babel [closed]

问题

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 3 years ago.

I have this function in one of my react components.

export default class EventTags extends React.Component{
      showAll () => {
        this.setState({
          showAll: true,
          showBtn: false
        });
      }
}

When webpack watch hits it I get an unexpected token error on the arrow function. I have the transform-es2015-arrow-functions plugin enabled but it doesn't seem to change the outcome.

Any ideas on what i'm doing wrong here?

回答1:

You need an equals sign when using class property initializers.

export default class EventTags extends React.Component {
  showAll = () => {
    this.setState({
      showAll: true,
      showBtn: false
    });
  };
}

• Ensure you have the transform-class-properties Babel transform enabled
• Unlike class methods, class property initializers should be followed by semicolons

Babel's docs on arrow functions in ES6 React components shows longer examples.

回答2:

You need to assign the arrow function, below is the correct syntax for creating a named arrow function.

const showAll = () => {
  this.setState({
    showAll: true,
    showBtn: false
  });
}

来源：https://stackoverflow.com/questions/39495306/arrow-function-is-considered-unexpected-token-in-react-component-using-babel