これをリバインドせずに太い矢印の機能を持つオブジェクトを返す方法はありますか？

Question

私は簡単な関数（リアクトコンポーネント内）があります。

getInitialState: function() { 
    return { 
    text: this.props.text 
    } 
} 

をしかし、私はそれarrowify脂肪にしたい：

getInitialState:() => { 
    text: this.props.text 
} 

私はエラーを取得する以外、脂肪矢印手段の後にあるため{あなたが明示的にreturn何かを除いて、未定義を返すコードブロック。少なくともそれは私が最初に思ったものです。しかし、私はthisがその太った矢の機能に今や縛られていると思って、今this.propsはundefinedです。

だから私は、この試す：this.propsは未定義である、

getInitialState:() => new Object({ 
    text: this.props.text 
}) 

をしかし、私は同じエラーを取得します。

私は興味がある2つの問題があると思います。まず、簡単なステートメントの太矢印の関数からオブジェクトを返す慣用的な方法は何ですか？次に、周辺コンテキストのthisオブジェクトへの参照を持つオブジェクトを返すにはどうすればよいですか？

Answer 1

は括弧なしでこの

getInitialState:() => ({ 
    text: this.props.text 
}) 

のように、括弧で囲み、またラベルとJavaScriptのブロックのようなオブジェクトリテラルのルックスは、それにtextと呼ばれます。曖昧なので、SyntaxErrorがスローされます。しかし、それを()で囲むと、JavaScriptはオブジェクトリテラルであることがわかります。

---

私は、これは

アロー機能がthisを持たない矢印関数に今も拘束されていると思います。矢印の機能でthisが見つかった場合、それは前のレベルに戻り、そこでthisが利用可能かどうかを確認し、それを使用します。あなたは、それが宣言されている機能ではなく、オブジェクト自身のthisオブジェクトを参照しますあなたの場合は

{ a: 1 } 
{ a: 1 } 

、thisを印刷し、この

(function Test1() { 
    console.log(this); 
    (() => console.log(this))(); 
}).bind({a: 1})(); 

のように、それを確認することができます。