不能在反應組件類中使用箭頭函數

Question

我已經開始了一個項目，我在後端使用React JS作爲前端的節點js。我用webpack捆綁了JS文件。我用babel以及其他必要的東西。當我在反應類中使用箭頭函數時，它會給出語法錯誤。像模塊構建失敗：SyntaxError：意外的令牌。但是我可以在節點中使用Arrow函數而不會有任何問題。

這是我的WebPack配置文件

import path from 'path'; 
import webpack from 'webpack'; 
import 'react-hot-loader/patch'; 

export default{ 
    devtool: 'eval', 
    entry:[ 
    'react-hot-loader/patch', 
    'webpack-hot-middleware/client?reload=true', 
    path.join(__dirname,'client/index.js')], 
    output:{ 
    path:'/', 
    publicPath:'/' 
    }, 
    plugins:[ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin() 

    ], 
    module:{ 
    loaders:[ 
     { 
     test:/\.js$/, 
     include:path.join(__dirname,'client'), 
     loaders: ['react-hot-loader/webpack', 'babel'] 
     }, 
     { 
     test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i, 
     loader: 'file-loader?name=[name].[ext]' 
     } 
    ] 
    }, 
    resolve:{ 
    extension:['','.js'] 
    } 
} 

我的陣營文件

class mapSidebar extends React.Component{ 

    constructor(props,context){ 
     super(props,context); 
     this.state = { 
     dataSource: [] 
     }; 
     this.handleUpdateInput = this.handleUpdateInput.bind (this); 
    } 

    handleUpdateInput = (value) => { 
     this.setState({ 
     dataSource: [ 
      value, 
      value + value, 
      value + value + value, 
     ], 
     }); 
    }; 

    render(){ 
     return(
     <div> 
      <Paper zDepth={2}> 
      <div>Hello</div> 
      <div> 
       <AutoComplete 
        hintText="Type anything" 
        dataSource={this.state.dataSource} 
        onUpdateInput={this.handleUpdateInput} 
       /> 
      </Paper> 
     </div> 
    ); 
    } 

} 

export default mapSidebar; 

如何解決這個問題？

Answer 1

這不是在這裏引起問題的箭頭函數。 Class properties不是ES6規範的一部分。

handleUpdateInput = (value) => { 
    // ... 
}; 

如果您希望能夠轉換此代碼，您需要添加class properties babel plugin。

或者，此轉換是作爲Babel的stage 2 preset的一部分提供的。

對類屬性使用箭頭函數可確保始終使用該組件調用該方法作爲this的值，這意味着此處的手動重新綁定是多餘的。

this.handleUpdateInput = this.handleUpdateInput.bind (this); 

Answer 2

這不是箭頭函數的問題，但在類聲明中使用它，此代碼將在構造函數體或任何其他函數體中工作，但不在類聲明中。

代碼應該看起來就像這樣：

handleUpdateInput(value){ 
    this.setState({ 
    dataSource: [ 
     value, 
     value + value, 
     value + value + value, 
    ], 
    }); 
}; 

使用箭頭功能可以在任何類方法內部完成，而不是內部類的聲明。例如在構造函數中使用箭頭函數：

constructor(props,context){ 
    super(props,context); 

    this.someFunc =()=>{ 
    //here function code 
    }; 
}