High Order Component


https://codesandbox.io/embed/400jy0j15x?module=%2Fsrc%2FHOC.js

High order component は コンポーネントを引数として受け取って、コンポーネントを返すファンクション。

参考記事

こちらの方が簡単

https://spin.atomicobject.com/2017/03/02/higher-order-components-in-react/

より高度な内容

https://reactjs.org/docs/higher-order-components.html

以下のコードでは、HOC が受け取ったコンポーネントに対して、react-redux の connect で state と dispatch を connect した上で、クラスコンポーネントを返している。渡されたコンポーネントに、少しだけ何かを足して返す、というのがポイント。

HOC によって、データを与える機能と、受け取ったデータを元にレンダリングする機能を分けることができる。

Leave a Reply

Your email address will not be published. Required fields are marked *