2016-04-05 1 views
0

最新バージョンのreact(v0.14.8)を使用するために継承した古い反応コンポーネント(v0.10.0)をアップグレードしています。React upgrade:getDefaultPropsの「this」可視性

// within a react component  
onClick: function() { 
    // DO SOMETHING 
} 

getDefaultProps: function() { 
    return { 
     someProp: 'prop', 
     onClick: this.onClick 
    } 
} 

これは簡単に以下のように、匿名関数にコードを移動する解決されます:

次のシナリオでは、動作を停止し

getDefaultProps: function() { 
    return { 
     someProp: 'prop', 
     onClick: function() { 
      //DO SOMETHING 
     } 
    } 
} 

私の質問はです:可視性を持っている理由「this」のレベルが変更され、このコードをリファクタリングする最良の方法は何ですか?そして、もし私がそのレベルで 'this'を使う必要があったらどうしますか?

謝辞として、私は反応スーパー初心者です。

答えて

1

The result of getDefaultProps() is shared across all instances of a component。これは結果がコンポーネントの特定のインスタンスに依存できないことを意味します。それが変更された理由は、キャッシュのパフォーマンス上のメリットのためですが、確かに言えません。

コードのリファクタリングに関しては、私はここに銀色の弾丸があるのか​​分かりません。あなたが現在持っているものは私の見解から、アンチパターンのように思えます。小道具はコンポーネントの内部動作を知らない消費者によって渡されることを意図されているため、小道具のデフォルト値は内部動作に依存することは奇妙に思えます。あなたがしていることを正確に知らなければ、nullをデフォルトの値として使用し、thisコンテキストにアクセスするときに実行時に値をチェックするのが最善の策だと言います。

handleSomeAction() { 
    if (!this.props.onClick) { 
     // DO SOMETHING 
    } 
}