React Academy · Урок

Аргументы, элементы управления и дополнение Actions

Используйте args, чтобы сделать истории интерактивными, а дополнение actions — чтобы журналировать события компонентов.

«Аргументы, элементы управления и дополнение Actions» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое аргументы

Аргументы — это входные данные (свойства) истории. Storybook использует объект args, чтобы отобразить компонент и предоставить панель «Управление» — интерактивный редактор свойств в интерфейсе Storybook.

Определение аргументов

Задайте аргументы в объекте истории. Storybook определяет тип элемента управления по типу свойства TypeScript.

export const Primary: Story = {
  args: {
    label: 'Click me',
    variant: 'primary',
    size: 'medium',
    disabled: false,
  },
};

Панель управления

Если аргументы определены, Storybook отображает интерактивные элементы управления на панели Управление под холстом. При изменении элемента управления история повторно отображается с новыми свойствами — менять код не нужно.

Настройка элементов управления с помощью ArgTypes

Используйте argTypes в meta, чтобы настроить отображение свойства в панели «Управление»: тип, варианты, описание и значение по умолчанию.

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' },
  },
};

Скрытие аргументов в панели управления

Задайте control: false в argTypes, чтобы скрыть свойство в панели «Управление» — это удобно для внутренних свойств или функций.

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

Дополнение «Действия»

Дополнение «Действия» (часть addon-essentials) записывает вызовы функций свойств в панели Действия. Используйте fn() из @storybook/test, чтобы создавать функции-шпионы, отображаемые на панели.

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

Автоматическое подключение действий с помощью argTypes

Используйте argTypes: { onClick: { action: 'clicked' } }, чтобы автоматически создать обработчик действия без импорта fn().

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

Глобальные аргументы

Задайте аргументы в preview.ts, чтобы применить их ко всем историям — это удобно для аргументов темы, локали или области просмотра, влияющих на каждый компонент.

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

Панель инструментов Storybook

Глобальные аргументы с конфигурацией toolbar отображаются как кнопки на панели инструментов Storybook, позволяя глобально переключать темы, локали или контрольные точки.

Композиция аргументов

Используйте аргументы другой истории, чтобы создать новую на их основе. Это уменьшает дублирование при создании вариантов историй.

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 },
};

Сопоставление значений элементов управления

Используйте mapping в argTypes, чтобы сопоставлять понятные пользователю варианты элементов управления с фактическими значениями свойств, например значками или компонентами.

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

Быстрая проверка

Что делает функция fn() из @storybook/test, если использовать её как аргумент истории?

Итоги

Аргументы управляют и панелью Controls (редактором свойств в реальном времени), и дополнением Actions (журналом событий). Определяйте типы аргументов с помощью argTypes для более гибких элементов управления, используйте fn() из @storybook/test для журналирования действий и объединяйте аргументы историй, чтобы уменьшить дублирование.

Часто задаваемые вопросы

Урок «Аргументы, элементы управления и дополнение Actions» бесплатный?

Да — полный текст урока «Аргументы, элементы управления и дополнение Actions» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Аргументы, элементы управления и дополнение Actions»?

Используйте args, чтобы сделать истории интерактивными, а дополнение actions — чтобы журналировать события компонентов. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Аргументы, элементы управления и дополнение Actions»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Storybook в проекте React
Написание историй CSF3
Аргументы, элементы управления и дополнение Actions
Тестирование Storybook и визуальная регрессия

← Назад к React Academy