リストボックスコンポーネント

私は最近、そのリストに必要な状態を管理するlistbox 役割
それについて書いて、それのために孤立したコードサンドボックスを作った後に、考えは私にしがみつき続けました.

I shouldn't have to use a hook directly for this. There should be a component for Listbox component and ListboxOption that manages that state implicitly.

私は手動で追加する必要はありませんmouseenter 選択した項目を変更するイベントリスナー.私は、部品が私のためにその詳細を取り扱うことを望みます.
暗黙の複合成分状態のためのこの願望と本能はApisReachUI's Tabs .
…の助けを得て React.Children.map , React Context , and keys , 私は素敵な複合コンポーネントAPIを実装することができました.

<Listbox>
  {items.map((item) => (
    <ListboxOption key={item.id}>
      <Item {...item} />
    </ListboxOption>
  ))}
</Listbox>

アイテムは、小道具やAをレンダリングする方法で選択されているかどうかを知ることができますuseContext フック.詳細はこちらをご覧ください.
ありがとうハッピーコーディング✌️