web-dev-qa-db-ja.com

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

私はReactバックエンドのノードjsのフロントエンドにJSを使用するプロジェクトを開始しました。JSファイルをバンドルするためにwebpackを使用しました。 Module build failed：SyntaxError：Unexpected token。のような反応クラス内で矢印関数を使用すると、構文エラーが発生しますが、ノードで矢印関数を問題なく使用できます。

これは私の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']
  }
}

My React file

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;

この問題を解決するには？

javascriptreactjsecmascript-6babeljsecmascript-next
17
TRomesh

ここで問題を引き起こしているのは矢印関数ではありません。 クラスプロパティ はES6仕様の一部ではありません。

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

このコードを変換できるようにするには、 class properties babel plugin を追加する必要があります。

あるいは、この変換はBabelの一部として提供されます ステージ2プリセット 。

クラスプロパティで矢印関数を使用すると、メソッドが常にthisの値としてコンポーネントとともに呼び出されます。つまり、ここでの手動の再バインドは冗長です。

this.handleUpdateInput = this.handleUpdateInput.bind (this);
41
Dan Prince

これは矢印関数の問題ではありませんが、クラス宣言内で使用すると、このコードはコンストラクター本体またはその他の関数本体で機能しますが、クラス宣言では機能しません。

コードは次のようになります。

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

矢印関数の使用は、クラスメソッド内で実行できますが、クラス宣言内では実行できません。たとえば、コンストラクターで矢印関数を使用する場合：

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

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