Args, Controls i dodatek Actions
Używanie args do tworzenia interaktywnych stories oraz dodatku actions do rejestrowania zdarzeń komponentów.
Args, Controls i dodatek Actions to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Czym są Args
Args to dane wejściowe (propsy) story. Storybook używa obiektu args do renderowania komponentu i obsługi panelu Controls — edytora propsów na żywo w interfejsie Storybooka.
Definiowanie Args
Należy ustawić args w obiekcie story. Storybook wnioskuje typ kontrolki na podstawie typu propsa w TypeScript.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Panel Controls
Po zdefiniowaniu args Storybook wyświetla interaktywne kontrolki w panelu Controls pod canvasem. Zmiana kontrolki powoduje ponowne renderowanie story z nowymi propsami — bez konieczności zmiany kodu.
ArgTypes do dostosowywania kontrolek
Należy używać argTypes w meta, aby dostosować sposób wyświetlania propsa w Controls: typ, opcje, opis i wartość domyślną.
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' },
},
};Ukrywanie Args w Controls
Należy ustawić control: false w argTypes, aby ukryć propsa w panelu Controls — jest to przydatne w przypadku propsów wewnętrznych lub funkcji.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},Addon Actions
Addon Actions (część addon-essentials) rejestruje wywołania funkcji przekazanych jako propsy w panelu Actions. Należy użyć fn() z @storybook/test, aby utworzyć funkcje spy wyświetlane w panelu.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Automatyczne podłączanie Actions za pomocą argTypes
Należy użyć argTypes: { onClick: { action: 'clicked' } }, aby automatycznie utworzyć handler akcji bez importowania fn().
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Globalne args
Należy ustawić args w preview.ts, aby stosować je globalnie do wszystkich stories — jest to przydatne w przypadku args dotyczących motywu, lokalizacji lub viewportu, które wpływają na każdy komponent.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Pasek narzędzi Storybooka
Globalne args z konfiguracją toolbar pojawiają się jako przyciski na pasku narzędzi Storybooka, umożliwiając globalne przełączanie motywów, lokalizacji lub breakpointów.
Kompozycja args
Należy rozpakować args z innej story, aby ją rozszerzyć. Ogranicza to powielanie kodu podczas tworzenia wariantów stories.
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 },
};Mapowanie wartości kontrolek
Należy użyć mapping w argTypes, aby mapować czytelne dla człowieka opcje kontrolek na rzeczywiste wartości propsów, na przykład ikony lub komponenty.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Szybkie sprawdzenie
Co robi funkcja fn() z @storybook/test, gdy zostanie użyta jako argument story?
Podsumowanie
Argumenty zasilają zarówno panel Controls (edytor właściwości na żywo), jak i dodatek Actions (rejestrator zdarzeń). Zdefiniuj typy argumentów za pomocą argTypes, używaj fn() z @storybook/test do rejestrowania akcji oraz komponuj argumenty między story, aby ograniczyć duplikowanie kodu.
Często zadawane pytania
Czy lekcja „Args, Controls i dodatek Actions” jest bezpłatna?
Tak — pełny tekst „Args, Controls i dodatek Actions” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Args, Controls i dodatek Actions”?
Używanie args do tworzenia interaktywnych stories oraz dodatku actions do rejestrowania zdarzeń komponentów. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Args, Controls i dodatek Actions”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Storybook w projekcie React
- Pisanie stories w CSF3
- Args, Controls i dodatek Actions
- Testowanie w Storybook i regresja wizualna