箭头函数被认为是使用 babel 的 React 组件中的意外标记

IT技术 javascript reactjs ecmascript-6 babeljs
2021-04-29 17:26:18

我的一个react组件中有这个功能。 

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

当 webpack watch 命中它时，我在箭头函数上收到一个意外的令牌错误。我启用了 transform-es2015-arrow-functions 插件，但它似乎没有改变结果。

关于我在这里做错了什么的任何想法？

2个回答

使用类属性初始值设定项时需要等号。

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

Babel 关于ES6 React 组件中箭头函数的文档显示了更长的示例。

您需要分配箭头函数，以下是创建命名箭头函数的正确语法。

const showAll = () => {
  this.setState({
    showAll: true,
    showBtn: false
  });
}
其它你可能感兴趣的问题
上一篇在 CSS module中使用 SCSS 变量 下一篇Webpack module构建失败意外令牌（rails react build）