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

2018/02/21

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

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

componentDidUpdate

などで

ref

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

class

で書いていると

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

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

ref

で

this

に代入しても、

componentDidUpdate

の中では

this

は

ProxyComponent

となっていて

ref

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

withHandlers

を併用する。

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