Args, Controls och Actions-addon
Använd args för att göra stories interaktiva och Actions-addon för att logga komponentevents.
Args, Controls och Actions-addon är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Vad är args?
Args är indata, alltså props, till en story. Storybook använder objektet args för att rendera komponenten och driva panelen Controls – en interaktiv prop-redigerare i Storybook-gränssnittet.
Definiera args
Ange args i story-objektet. Storybook härleder kontrolltypen från TypeScript-propens typ.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Panelen Controls
När args har definierats renderar Storybook interaktiva kontroller i panelen Controls under arbetsytan. När du ändrar en kontroll renderas storyn om med nya props – inga kodändringar behövs.
Anpassa kontroller med argTypes
Använd argTypes i meta för att anpassa hur en prop visas i Controls: typ, alternativ, beskrivning och standardvärde.
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' },
},
};Dölja args från Controls
Ange control: false i argTypes för att dölja en prop från panelen Controls – användbart för interna props eller funktioner.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},Tillägget Actions
Tillägget Actions, som ingår i addon-essentials, loggar anrop av prop-funktioner i panelen Actions. Använd fn() från @storybook/test för att skapa spionfunktioner som visas i panelen.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Koppla Actions automatiskt med argTypes
Använd argTypes: { onClick: { action: 'clicked' } } för att automatiskt skapa en action-handler utan att importera fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Globala args
Ange args i preview.ts för att tillämpa dem på alla stories globalt – användbart för tema, språk eller viewport-args som påverkar varje komponent.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Storybooks verktygsfält
Globala args med konfigurationen toolbar visas som knappar i Storybooks verktygsfält, så att du globalt kan växla mellan teman, språk eller brytpunkter.
Sammansättning av args
Sprid args från en annan story för att bygga vidare på den. Det minskar duplicering när du skapar variantstories.
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 },
};Mappa kontrollvärden
Använd mapping i argTypes för att mappa lättlästa kontrollalternativ till faktiska prop-värden, till exempel ikoner eller komponenter.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Snabbkontroll
Vad gör funktionen fn() från @storybook/test när den används som ett story-argument?
Sammanfattning
Args styr både panelen Controls (live-redigerare för props) och tillägget Actions (händelselogg). Definiera arg-typer med argTypes för mer avancerade kontroller, använd fn() från @storybook/test för åtgärdsloggning och komponera args mellan stories för att minska duplicering.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Args, Controls och Actions-addon” gratis?
Ja – hela texten till ”Args, Controls och Actions-addon” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Args, Controls och Actions-addon”?
Använd args för att göra stories interaktiva och Actions-addon för att logga komponentevents. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Args, Controls och Actions-addon”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera Storybook i ett React-projekt
- Skriva CSF3-stories
- Args, Controls och Actions-addon
- Storybook-testning och visuell regression