楽しく学ぼう!!エンジニャリング!アルファ版!
typescript
javascript

カスタムコンポーネントを作ってみよう!

さっそくだけど見出しとかリンクとかのカスタムコンポーネントの切り方をやっていくよ

これはあんまり難しくないよね

Reactの{children}をラップすることで実装ができるんだけどchildrenにはReactNodeという型が付くわよ

チルドレンってLayout.tsxの中にもあるやつ?

そうそう、それを使うと周りで囲ったやつで呼び出した時も囲うことができるんだ
習うより慣れろだ、見ていったらわかるから

それじゃあコードを見せてもらうかしら

今回はジェームズウォーリスさんからコードを拝借したよ

まずこの関数は引数がhrefとchildren二つあるのね?

そうだ、で、ラップコンポーネントで必要なのはchildrenは必ず必要だ、これがないとラップする使い方ができない。
そしてhrefは普通の引数で呼び出した時に当てた値が上で作ったところに渡っていくよ。

なるほどーちょっとわからないから呼び出し側も見せてくれない?

普通にこんなかんじ, もし引数を設定しなかったらエディタが怒ってくれるからカーソルを合わせればすぐわかるぞ

ありがとうわかったわ〜! TailwindとかMaterialUI, Chakraとかのコンポーネントを作っても面白そうね!

そうね、管理が一括で一つの部分に集約されるから保守性、メンテナンス性がグンっと上がるわ、
フレームモーションとかもこれ作っちゃった方が楽ね〜