Args, Controls und das Actions-Addon
Verwenden Sie Args, um Stories interaktiv zu machen, und das Actions-Addon, um Component-Events zu protokollieren.
Args, Controls und das Actions-Addon ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Args?
Args sind die Eingaben (Props) einer Story. Storybook verwendet das args-Objekt, um die Komponente zu rendern und das Controls-Panel zu steuern – einen Editor für Props in der Storybook-Oberfläche.
Args definieren
Legen Sie Args im Story-Objekt fest. Storybook leitet den Control-Typ aus dem TypeScript-Prop-Typ ab.
export const Primary: Story = {
args: {
label: 'Click me',
variant: 'primary',
size: 'medium',
disabled: false,
},
};Das Controls-Panel
Wenn Args definiert sind, rendert Storybook interaktive Controls im Controls-Panel unterhalb der Canvas. Wenn Sie ein Control ändern, wird die Story mit neuen Props erneut gerendert – ohne Änderungen am Code.
ArgTypes für die Anpassung von Controls
Verwenden Sie argTypes im Meta-Objekt, um festzulegen, wie ein Prop in Controls angezeigt wird: Typ, Optionen, Beschreibung und Standardwert.
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 in Controls ausblenden
Setzen Sie control: false in argTypes, um ein Prop im Controls-Panel auszublenden – nützlich für interne Props oder Funktionen.
argTypes: {
onClick: { control: false },
className: { table: { disable: true } },
},Das Actions-Add-on
Das Actions-Add-on (Teil von addon-essentials) protokolliert Aufrufe von Prop-Funktionen im Actions-Panel. Verwenden Sie fn() aus @storybook/test, um Spy-Funktionen zu erstellen, die im Panel angezeigt werden.
import { fn } from '@storybook/test';
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // click events appear in Actions panel
onHover: fn(),
},
};Actions mit argTypes automatisch verbinden
Verwenden Sie argTypes: { onClick: { action: 'clicked' } }, um automatisch einen Action-Handler zu erstellen, ohne fn() zu importieren.
const meta: Meta<typeof Select> = {
component: Select,
argTypes: {
onChange: { action: 'changed' },
onBlur: { action: 'blurred' },
},
};Globale Args
Legen Sie Args in preview.ts fest, um sie global auf alle Stories anzuwenden – nützlich für Theme-, Locale- oder Viewport-Args, die jede Komponente betreffen.
// .storybook/preview.ts
export const globalTypes = {
locale: {
description: 'Internationalization locale',
defaultValue: 'en',
toolbar: {
icon: 'globe',
items: ['en', 'fr', 'de'],
},
},
};Storybook-Toolbar
Globale Args mit einer toolbar-Konfiguration werden als Schaltflächen in der Storybook-Toolbar angezeigt. So können Sie Themes, Locales oder Breakpoints global wechseln.
Args kombinieren
Übernehmen Sie Args aus einer anderen Story mit Spread-Syntax, um darauf aufzubauen. Dadurch reduzieren Sie Duplikate beim Erstellen von Varianten-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 },
};Control-Werte zuordnen
Verwenden Sie mapping in argTypes, um benutzerfreundliche Control-Optionen tatsächlichen Prop-Werten zuzuordnen, beispielsweise Icons oder Komponenten.
argTypes: {
icon: {
options: ['Star', 'Heart', 'None'],
mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
control: { type: 'select' },
},
},Kurztest
Was macht die Funktion fn() aus @storybook/test, wenn sie als Story-Argument verwendet wird?
Zusammenfassung
Args steuern sowohl das Controls-Panel (den Live-Editor für Props) als auch das Actions-Addon (den Event-Logger). Definieren Sie Arg-Typen mit argTypes, verwenden Sie fn() aus @storybook/test zur Protokollierung von Aktionen und kombinieren Sie Args über mehrere Stories hinweg, um Duplikate zu vermeiden.
Häufig gestellte Fragen
Ist die Lektion „Args, Controls und das Actions-Addon“ kostenlos?
Ja — der vollständige Text von „Args, Controls und das Actions-Addon“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Args, Controls und das Actions-Addon“?
Verwenden Sie Args, um Stories interaktiv zu machen, und das Actions-Addon, um Component-Events zu protokollieren. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Args, Controls und das Actions-Addon“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Storybook in einem React-Projekt einrichten
- CSF3-Stories schreiben
- Args, Controls und das Actions-Addon
- Storybook-Tests und visuelle Regression