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官網