React.js
Pocket

HOCをつかっていたけど、childrenをFunctionとして渡すことで同じようなことができるらしい。

参考記事

Function as Child Components

Reactのfunction as childとは何か

ReactでHoCsの代わりとしてFunction as Child Componentsを利用して型もつける

参考記事に書いてあるように、HOCで書いていたところがすっきりとしたり、cloneElementで要素をクローンする必要がなくなるらしい。メリットは使ってみてもうちょっと探ってみます。

最初見た時馴染みない書き方でしたが、react-routerなどで使われてるそうです。

簡単な書き方

以下のように書いておいて。

const Wrap = ({ children }) => {
  return children('タイトル!');
};

このようにFunctionとして使うイメージ

<Wrap>
  {(title) => <div>${title}</div>}
</Wrap>

titleに「タイトル!」が入ってきます。

Pocket

Category : Tag :