Argsit, kontrollit ja Actions-lisäosa
Käyttäkää argseja storyjen interaktiivisuuteen ja Actions-lisäosaa komponenttien tapahtumien lokittamiseen.
Argsit, kontrollit ja Actions-lisäosa on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä args-arvot ovat
Args-arvot ovat storyn syötteitä eli propseja. Storybook käyttää args-objektia komponentin hahmontamiseen ja Controls-paneelin ohjaamiseen. Se on Storybookin käyttöliittymässä oleva interaktiivinen prop-editori.
Args-arvojen määrittäminen
Asettakaa args-arvot story-objektissa. Storybook päättelee ohjaimen tyypin TypeScript-propin tyypistä.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Controls-paneeli
Kun args-arvot on määritetty, Storybook näyttää interaktiiviset ohjaimet Controls-paneelissa canvas-näkymän alapuolella. Ohjaimen muuttaminen hahmontaa storyn uudelleen uusilla propseilla, eikä koodia tarvitse muuttaa.
ArgTypes ohjainten mukauttamiseen
Käyttäkää metassa argTypes-määritystä mukauttamaan, miten prop näkyy Controls-paneelissa: tyyppi, vaihtoehdot, kuvaus ja oletusarvo.
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger'],
description: 'Visual style of the button',
},
size: {
control: { type: 'radio' },
options: ['small', 'medium', 'large'],
},
disabled: { control: 'boolean' },
label: { control: 'text' },
},
};Args-arvojen piilottaminen Controls-paneelista
Asettakaa argTypes-määrityksessä control: false, jos haluatte piilottaa propin Controls-paneelista. Tämä on hyödyllistä sisäisille propseille tai funktioille.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},Actions-lisäosa
Actions-lisäosa, joka kuuluu addon-essentials-kokonaisuuteen, kirjaa prop-funktioiden kutsut Actions-paneeliin. Käyttäkää @storybook/test-paketin fn()-funktiota luodaksenne spy-funktioita, jotka näkyvät paneelissa.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Actions-toimintojen automaattinen yhdistäminen argTypes-määrityksellä
Käyttäkää määritystä argTypes: { onClick: { action: 'clicked' } } toimintokäsittelijän luomiseen automaattisesti ilman fn()-funktion tuomista.
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Yleiset args-arvot
Asettakaa args-arvot tiedostossa preview.ts, jotta ne otetaan käyttöön kaikissa storyissa. Tämä on hyödyllistä teeman, kielen tai kaikkien komponenttien näyttöalueen määrittävien args-arvojen yhteydessä.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Storybookin työkalupalkki
toolbar-määrityksen sisältävät yleiset args-arvot näkyvät painikkeina Storybookin työkalupalkissa, joten voitte vaihtaa teemaa, kieltä tai näyttökokoa yleisesti.
Args-arvojen koostaminen
Levittäkää toisen storyn args-arvot rakentaaksenne sen pohjalta uuden storyn. Näin vähennätte toistoa varianttistoryja luodessanne.
export const Primary: Story = {
args: { label: 'Save', variant: 'primary' },
};
export const PrimaryLoading: Story = {
args: { ...Primary.args, loading: true },
};
export const PrimaryDisabled: Story = {
args: { ...Primary.args, disabled: true },
};Control-arvojen yhdistäminen
Käyttäkää argTypes-määrityksen mapping-ominaisuutta yhdistämään ihmisen luettavissa olevat Control-vaihtoehdot todellisiin prop-arvoihin, kuten kuvakkeisiin tai komponentteihin.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Pikatarkistus
Mitä @storybook/test-paketin fn()-funktio tekee, kun sitä käytetään storyn arg-argumenttina?
Kertaus
Args-argumentit ohjaavat sekä Controls-paneelia (reaaliaikainen prop-editoriä) että Actions-lisäosaa (tapahtumaloki). Määritelkää arg-tyypit argTypes-määrityksellä monipuolisempia säätimiä varten, käyttäkää @storybook/test-paketin fn()-funktiota toimintojen kirjaamiseen ja koostakaa arg-argumentteja eri storyjen välillä päällekkäisyyksien vähentämiseksi.
Opi React 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
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Argsit, kontrollit ja Actions-lisäosa” ilmainen?
Kyllä – oppitunnin ”Argsit, kontrollit ja Actions-lisäosa” 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 React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Argsit, kontrollit ja Actions-lisäosa”?
Käyttäkää argseja storyjen interaktiivisuuteen ja Actions-lisäosaa komponenttien tapahtumien lokittamiseen. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Argsit, kontrollit ja Actions-lisäosa”-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ä React Academy-oppitunnilla?
Kyllä. Jokainen React 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
- Storybookin käyttöönotto React-projektissa
- CSF3-storyjen kirjoittaminen
- Argsit, kontrollit ja Actions-lisäosa
- Storybook-testaus ja visuaalinen regressio