React (babel 経由で ES6 を使用) で、含まれているコンポーネントの状態を更新する静的メソッドを作成しようとしています。オブジェクトを引数として取ります。問題は、「this」がレキシカル スコープにバインドされないことです。
static updateList = (Item) => {
this.setState({ cartUpdated: Date.now() }); //setState is not available
}
他のコンポーネントでは...
<div onClick={Cart.updateList.bind(this,this.props)}>Click</div>
最初は、これは「bind」を介して渡された「this」が原因である可能性があると考えていましたが、クリックハンドラーを含むコンポーネントに重複した非静的矢印メソッドを作成し、レキシカルな「this」に問題なくアクセスできました。
必死になってsetStateの静的クローンを作成しようとしましたが、うまくいきませんでした。
これは構造/セキュリティ上の決定であると思います (「これ」を漏らしたら、すべてを漏らしてしまいます!) しかし、「これ」へのアクセスをどのように処理しますか? この制限により、updateList 関数は updateList とクリック ハンドラを持つコンポーネントの上に配置する必要がありますか? もちろん、これは実際にはもっと反応するかもしれませんが、私は興味があります。