Debug: babel arrow function 'unexpected token' in React.Component

问题描述

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
....
onHandler = () =>{ //报错
    ....
}
...
}

SyntaxError: src/index.js: Unexpected token (93:16)

使用正常的函数定义一切正常

onHandler(){
...
}

说明是babel配置问题，无法正常解析React Component内的特性properties。

---

解决方案

安装babel插件transform-class-properties,并按照提示在.babelrc或是package.json中设置plugin

// without options
{
  "plugins": ["transform-class-properties"]
}

// with options
{
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

---

补充材料

• babel官网