React Academy · 课时

Args、Controls 与 Actions 插件

Q: 「Args、Controls 与 Actions 插件」这节课中我会学到什么？

使用 args 让故事具有交互性，并使用 Actions 插件记录组件事件。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 args 让故事具有交互性，并使用 Actions 插件记录组件事件。

Args、Controls 与 Actions 插件 是 CoddyKit 上的免费 React Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是参数

参数是故事的输入（属性）。Storybook 使用 args 对象渲染组件，并驱动控件面板，即 Storybook 界面中的实时属性编辑器。

定义参数

在故事对象中设置 args。Storybook 会根据 TypeScript 属性类型推断控件类型。

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

控件面板

定义参数后，Storybook 会在画布下方的控件面板中渲染交互式控件。更改控件会使用新的属性重新渲染故事，无需修改代码。

使用 ArgTypes 自定义控件

在元数据中使用 argTypes，自定义属性在控件面板中的显示方式：类型、选项、描述和默认值。

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

从控件中隐藏参数

在 argTypes 中设置 control: false，即可将属性从控件面板中隐藏，这对内部属性或函数很有用。

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

操作插件

操作插件（属于 addon-essentials）会在操作面板中记录属性函数调用。使用 @storybook/test 中的 fn() 创建监视函数，这些函数会显示在面板中。

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

映射控件值

在 argTypes 中使用 mapping，将易读的控件选项映射到实际的属性值（例如图标或组件）。

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

快速检查

将 fn() 函数用作故事参数时，它的作用是什么？

要点回顾

参数既驱动 Controls 面板（实时属性编辑器），也驱动 Actions 插件（事件日志记录器）。使用 argTypes 定义参数类型以获得更丰富的控件，使用 fn()（来自 @storybook/test）记录操作日志，并在不同故事之间组合参数以减少重复。

常见问题解答

「Args、Controls 与 Actions 插件」课时是免费的吗？

是的 — 「Args、Controls 与 Actions 插件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「Args、Controls 与 Actions 插件」这节课中我会学到什么？

使用 args 让故事具有交互性，并使用 Actions 插件记录组件事件。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Args、Controls 与 Actions 插件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy