Debug: babel arrow function ‘unexpected token’ in React.Component

NO IMAGE

問題描述

// 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 }]
]
}

補充材料