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 を取り扱うことができた。
Top comments (0)