反応コンポーネントクラス内で矢印関数を使用できません

Question

私はReact JSをバックエンドのノードjsのフロントエンドに使用するプロジェクトを開始しました。 JSファイルをバンドルするためにwebpackを使用しました。私は他の必要なものと一緒にバベルを使いました。私が反応クラスの中で矢関数を使用するとき、構文エラーが発生します。 モジュールのビルドに失敗しました：SyntaxError：予期しないトークン。しかし、私は問題なしでノードで矢印機能を使用することができます。

これが私の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の一部として提供されます。

クラスプロパティでarrow関数を使用すると、コンポーネントが常に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 
    }; 
}