ReactJSで太い矢印機能をバインドするかどうかはわかりませんか？

Question

私は脂肪族の機能に縛られるべきか、ReactJSに縛られるべきではないかと混乱していますか？

通常の機能は、結合することなく正常に動作しませんが、私は太っ矢印関数がバインドされるべき知っているかいない

Answer 1

いいえ、あなたは矢印の機能にthisをバインドする必要はありませんいけません。それらは、囲むコンテキストと同じ値を持っています（this）。

this.myValue = 5; 

const myFunc =() => { 
    this.myValue = 10; 
} 

myFunc(); 

console.log(this.myValue); // 10 

詳細については、hereを参照してください。

Answer 2

バインド機能にthis（必須と思われる）が必要な場合は、thisを正しくバインドする必要があります。 （airbnb eslinterによって推奨される）最善の方法は太い矢印の機能です。 exempleとして

、のは、私はこのコンポーネントを持っていると仮定してみましょう：

class MyComponent extends React.Component { 

    toBeRunOnSpanClick() { 
    this.props.clickHandler(); 
    } 

    render() {return <span onclick={/* What should you use here*/}></span>} 
} 

これは動作しません。

class MyComponent extends React.Component { 

    toBeRunOnSpanClick() { 
    this.props.clickHandler(); 
    } 

    render() {return <span onclick={this.toBeRunOnSpanClick}></span>} 
} 

をごtoBeRunOnSpanClick機能のthisがあなたのクラスと同じではありません。それがjavascriptの仕組みです。

良い方法は、次のようになります[？クラスメソッドでES6矢印を使用する方法]の

class MyComponent extends React.Component { 

    toBeRunOnSpanClick() { 
    this.props.clickHandler(); 
    } 
    // this.toBeRunOnSpanClick.bind(this) will work too but it is way less comprehensive 
    render() {return <span onclick={() => {this.toBeRunOnSpanClick()}}></span>} 
}