recompose で ref を扱う

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

アプリケーションを作っていると、往々にして componentDidUpdate などで ref を参照したいということが発生する。普通に class で書いていると

class extends React.Component {
  componentDidUpdate() {
    this.textarea // => <textarea />
  }

  render() {
    return (
      <textarea ref={textarea => (this.textarea = textarea)} />
    }
  }
}

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

const enhance = lifecycle({
  componentDidUpdate() {
    // ???
  }
})

enhance(() => (<textarea ref={???} />))

というような形に分離する。この時、先に示したように ref で this に代入しても、componentDidUpdate の中では this は ProxyComponent となっていて ref が読み出せなくなってしまう。これを解決するためには、withHandlers を併用する。

const enhance = compose(
  withHandlers(() => {
    let refs = {}
    return {
      onRef: props => textarea => (refs.textarea = textarea),
      onUpdate: props => refs.textarea // として参照できる!!
    }
  }),
  lifecycle({
    componentDidUpdate() {
      this.props.onUpdate()
    }
  })
)

enhance(props => (<textarea ref={props.onRef} />))

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