アロー機能がブラウザで動作していない

Question

方法以下

は

var DBBox = React.createClass({ 
    loadArticlesFromServer: function() { 
    $.ajax({ 
    url: this.props.url, 
    dataType: 'json', 
    data: {username:data.username,isPublished:data.isPublished, heading:data.heading}, 
    cache: false, 
    success: function(data) { 
     this.setState({data: data}); 
    }.bind(this), 
    error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
    }.bind(this) 
    }); 
}, 

を正常に動作します。しかし、私はメソッドの宣言を変更した場合、この

loadArticlesFromServer:()=> { //error - Cannot read property 'props' of undefined at line 6 

または

loadArticlesFromServer=()=> { //Syntax error 

アムのように2行目の関数を矢印します私は間違って矢印機能を使用して、それともサポートされていませんか？私はクロームを使用しており、幸運なしにハーモニーフラグを有効にしようとしました。

Answer 1

arrow関数式は、非メソッド関数に最適です。私たちがメソッドとしてそれらを使用しようとするとどうなるかを見てみましょう。

'use strict'; 
var obj = { 
    i: 10, 
    b:() => console.log(this.i, this), 
    c: function() { 
    console.log(this.i, this) 
    } 
} 
obj.b(); // prints undefined, Window 
obj.c(); // prints 10, Object {...}