Babelが矢印関数の構文エラーをスローする

Question

私はReactの小さなプロジェクトにthis codeを適用しようとしていますが、問題があります。これを解決する方法がわかりません。これはバグのオリジナルのコードまたは私のバベルです（ライブラリや何かが欠けているようなものです）。

handleRequestSort = (event, property) => { ... } // unexpected '=' 

：私はそうバベルはすなわち、それらに予期しないトークンをスローしていましたので、いくつかの機能を適応しなければならなかったさ

そうなことは、

static propTypes = { // unexpected '=' 
    onRequestSort: PropTypes.func.isRequired, 
    onSelectAllClick: PropTypes.func.isRequired, 
    order: PropTypes.string.isRequired, 
    orderBy: PropTypes.string.isRequired, 
}; 

は

static get propTypes() { 
    return { 
     onRequestSort: PropTypes.func.isRequired, 
     onSelectAllClick: PropTypes.func.isRequired, 
     order: PropTypes.string.isRequired, 
     orderBy: PropTypes.string.isRequired, 
    } 
} 

、これになりました

この番号になりました：

私の主な問題のために

handleRequestSort(event, property) { ... } 

、私はこの置き換え：しかし、私は順序の変更をトリガーテーブルの上にある矢印をクリックした場合、私が手cannot read props of undefinedこの

createSortHandler(property) { 
    return function (event) { 
     this.props.onRequestSort(event, property); 
    }; 
}; 

によって

createSortHandler = property => event => { // unexpected '=' 
    this.props.onRequestSort(event, property); 
}; 

を。それ以外の場合は、私のコードに書かれているように `予期しないトークン '='を取得します。

私の質問は次のとおりです：元のコードはバグですか、それは私のバベルですか、それとも何か他のものですか？私は現在webpackerのRailsベースにいますが、これが私がこれらの問題を抱えている理由ではないと思います。

Answer 1

実験的な構文であるクラスプロパティ（つまり予期しないトークン=）を変換するために、babel-plugin-transform-class-propertiesプラグインがありません。 propTypesのクラスプロパティとクラスプロパティの矢印関数を使用する場合は、Babelの設定に含めます。 thisがコンポーネントを参照していない通常の関数を使用しているため、this.propsが未定義の2番目のエラーです。代わりに矢印関数を返す：

createSortHandler(property) { 
    return (event) => { 
    this.props.onRequestSort(event, property); 
    }; 
};