4月も半ばに近づきようやく春の陽気を感じられるようになってきましたね。
今日は珈琲館で書いてる。
前提
子要素によって親要素の状態を更新するコンポーネント とは、「そのコンポーネントを特定のコンポーネントの children
として渡すことで特別な処理を行うコンポーネント」のことです。
よく分からないと思うので以下に疑似コードを示します。
import { Tab, TabItem } from './my-handmade-tab'; const Component = () => { // 以下のようにして使うと、 "fisrt" と "second" というアイテムを持ったタブが生成される // タブがクリックされると中身が切り替わる return <Tab defaultKey="first"> <TabItem tabKey="first" title="first"> first tab content </TabItem> <TabItem tabKey="second" title="second"> second tab content </TabItem> </Tab> }
みたいなやつのことです。UIライブラリとかでよく見るやつですね。
実は最近まで「こういうのってどうやるといいのかなぁ」とは思いつつも、これを実現しているライブラリの中身を見に行くでもなくなんとなくモヤモヤした日々を送っていたところ、似たような処理を自前で実装する必要がとうとう出てきてしまい、ひええ~と思いながら頑張って考えた結果なんとか実現できたので、その成果を書いていこうと思います。
続きを読む