Yhdistelmäkomponentit Contextin avulla
Jaa implisiittinen tila emokomponentin ja sille määritettyjen lasten välillä Contextin avulla ja mallinna - ja -tyyppisiä rajapintoja.
Yhdistelmäkomponentit Contextin avulla on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä yhdistelmäkomponentit ovat?
Yhdistelmäkomponentit ovat toisiinsa liittyvien komponenttien joukko, joka on suunniteltu toimimaan yhtenä kokonaisuutena – kuten HTML:n <select> ja <option>. Yläkomponentti jakaa implisiittisen tilan tiettyjen alikomponenttiensa kanssa.
Tavoite: selkeämmät API:t
Sen sijaan, että kirjoittaisitte <Select options={[...]} value={x} onChange={...} />, voitte kirjoittaa <Select><Option value="a">Apple</Option></Select>. Rakenne on deklaratiivinen ja JSX:n mukainen.
Naivistinen lähestymistapa (ongelma)
Tilan välittäminen propsien kautta edellyttää, että komponentin käyttäjä yhdistää kaiken itse. Lapset eivät automaattisesti tiedä yläkomponentin tilasta.
// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
<TabList>
<Tab index={0}>Home</Tab>
<Tab index={1}>Profile</Tab>
</TabList>
</Tabs>Context yhdistäjänä
Yläkomponentti luo ja välittää jaetun tilan sisältävän Contextin. Lapset käyttävät Contextia – erillistä propsien välitystä ei tarvita.
import { createContext, useContext, useState } from 'react';
const TabsContext = createContext(null);
export function Tabs({ children, defaultIndex = 0 }) {
const [activeIndex, setActiveIndex] = useState(defaultIndex);
return (
<TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
<div className="tabs">{children}</div>
</TabsContext.Provider>
);
}Lapsikomponentit käyttävät Contextia
Kukin lapsi lukee tiedot Contextista – propsien välittäminen puusta alaspäin ei ole tarpeen.
export function Tab({ index, children }) {
const { activeIndex, setActiveIndex } = useContext(TabsContext);
const isActive = activeIndex === index;
return (
<button
className={isActive ? 'active' : ''}
onClick={() => setActiveIndex(index)}
>
{children}
</button>
);
}
export function Panel({ index, children }) {
const { activeIndex } = useContext(TabsContext);
if (activeIndex !== index) return null;
return <div className="panel">{children}</div>;
}Staattiset ominaisuudet löydettävyyttä varten
Liittäkää alikomponentit yläkomponenttiin, jotta käyttäjät löytävät ne automaattisen täydennyksen avulla.
Tabs.Tab = Tab;
Tabs.Panel = Panel;
// Usage:
<Tabs>
<Tabs.Tab index={0}>Home</Tabs.Tab>
<Tabs.Tab index={1}>Profile</Tabs.Tab>
<Tabs.Panel index={0}>Home content</Tabs.Panel>
<Tabs.Panel index={1}>Profile content</Tabs.Panel>
</Tabs>Käytännön esimerkki: Disclosure
Disclosure-widgetissä Trigger- ja Panel-lapset jakavat avoinna tai suljettuna olemisen tilan Contextin kautta.
function Disclosure({ children }) {
const [isOpen, setIsOpen] = useState(false);
return (
<DisclosureContext.Provider value={{ isOpen, setIsOpen }}>
<div>{children}</div>
</DisclosureContext.Provider>
);
}
function Trigger({ children }) {
const { isOpen, setIsOpen } = useContext(DisclosureContext);
return <button onClick={() => setIsOpen(o => !o)}>{children}</button>;
}
function Panel({ children }) {
const { isOpen } = useContext(DisclosureContext);
return isOpen ? <div>{children}</div> : null;
}Hookit julkisena API:na
Viekää mukautettu hook ulos, jotta käyttäjät voivat rakentaa sen päälle omia komponenttejaan.
export function useTabs() {
const ctx = useContext(TabsContext);
if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
return ctx;
}Polymorfiset yhdistelmäkomponentit
Antakaa yläkomponentin renderöidä mikä tahansa elementti as-propin tai asChild-mallin avulla (Radix UI:n lähestymistapa). Näin yhdistelmäkomponentit voidaan yhdistää mielivaltaiseen JSX:ään.
Headless-yhdistelmämallit
Headless-kirjastot (Radix, Headless UI) tarjoavat yhdistelmäkomponentteja ilman tyylejä – saavutettavuuslogiikka on sisäänrakennettu, ja tyylit voitte määrittää tarpeidenne mukaan.
Kohta, jossa voi kompastua: lasten tarkastaminen
Vanhassa mallissa lapsia tarkastettiin React.Childrenin avulla – ratkaisu on hauras ja helposti rikkoutuva. Käyttäkää tilan jakamiseen aina Contextia.
Pikatarkistus
Miten lapsikomponentit viestivät yläkomponentin kanssa yhdistelmäkomponenttimallissa?
Kertaus: yhdistelmäkomponentit
Yhdistelmäkomponentit antavat toisiinsa liittyvien osien toimia yhtenä deklaratiivisena kokonaisuutena. Käyttäkää tilan jakamiseen Contextia: Provider yläkomponentissa ja useContext lapsissa. Liittäkää alikomponentit staattisina ominaisuuksina, jotta ne ovat helposti löydettävissä. Viekää mukautettu hook ulos julkisena API:na. Radix ja Headless UI ovat hyviä esimerkkejä. Suosikaa Contextia Children-tarkastelun sijaan.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Yhdistelmäkomponentit Contextin avulla” ilmainen?
Kyllä – oppitunnin ”Yhdistelmäkomponentit Contextin avulla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Yhdistelmäkomponentit Contextin avulla”?
Jaa implisiittinen tila emokomponentin ja sille määritettyjen lasten välillä Contextin avulla ja mallinna - ja -tyyppisiä rajapintoja. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Yhdistelmäkomponentit Contextin avulla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Yhdistelmäkomponentit Contextin avulla
- Render Props- ja HOC-mallit
- Portaalit modaalisille ikkunoille ja työkaluvihjeille
- Virherajat