recompose で ref を扱う - dev.to/jgs

recompose を使うと見た目の component とロジックを切り離して書けるのでスッキリする、というような記事を先日書いた( Storybook Driven Development を試している )のだが、React の ref の使い方で大いにハマったので書いておく。

アプリケーションを作っていると、往々にして

code:_

componentDidUpdate

などで

code:_

ref

を参照したいということが発生する。普通に

code:_

class

で書いていると

code:_

という風に書くが、recompose を使っていると

code:_

というような形に分離する。この時、先に示したように

code:_

ref

で

code:_

this

に代入しても、

code:_

componentDidUpdate

の中では

code:_

this

は

code:_

ProxyComponent

となっていて

code:_

ref

が読み出せなくなってしまう。これを解決するためには、

code:_

withHandlers

を併用する。

code:_

これで recompose でも ref を取り扱うことができた。