React | 那個在 Class Component 中的 Arrow function （箭頭函式）
在 React 中，一般在 Component 內的 Method 都這麼定義：
然後這麼做比較麻煩的地方是，如果需要用到 this.setState 等事件，就得在呼叫時另外指定 this ，不然就是在 constructor 中直接定義了 this 。
接下來換成以 Arrow function 定義 Method ：
雖然 Arrow function （箭頭函式）還在提案階段，但使用 Arrow function 的好處除了比較潮外，還能夠利用定義 Arrow function 時 this 不會變動的特性，就不用在使用時另外指定 this 了，不然摸摸你的良心，為每個 Method 綁定 this 真心覺得煩對吧？
好啦！那重點來了，因為使用了 React 所以我們會使用 webpack 去編譯對吧？然後編譯時就會使用 Babel 去當作 Loader 對吧？然後那些 Loader 一定有編譯 ES6 的 @babel/preset-env 和 JSX 的 @babel/preset-react 對吧？但是上面那個關於 Class Component 的 Arrow function 都不在那兩個 Loader 的管轄範圍內。
對，所以這篇的重點就是要說：
如果想使用潮潮的 Arrow function 在 Class Component 中，就得再裝 @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-class-properties@babel/plugin-proposal-class-properties 是Babel 提供對 Class 的 Plugin ，這個 Plugin 會去處理 Class 內的語法，官網這裡有註明哪些語法會被處理。
如果是使用 .babelrc.js 設定 Babel 的編譯，那只需要將這個 Plugin 添加上去：
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
}如果是使用 webpack.config.js 設定 Babel 編譯的話，也是再把 Plugin 加上去就行了：
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react','@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties'],
}
}
}
]基本上 Coding Blog 的文章大略都會是這樣子，可能抓個五分鐘就能快速讀完 😂 ，也算是記錄自己都遇到哪些問題，所以也歡迎大家提出自己在工作上碰到的問題和踩過的坑 ，一起學習一起變強 ✌️ 。
參考文章
