什么是 Story?

一个 Story 捕捉了 UI 组件的渲染状态。开发者为一个组件编写多个 Story，以描述组件支持的所有“有趣”状态。

当您安装 Storybook 时，CLI 创建了示例组件，演示了您可以使用 Storybook 构建的组件类型：Button、Header 和 Page。

每个示例组件都有一组 Story，展示了它支持的状态。您可以在 UI 中浏览这些 Story，并在以 .stories.js|ts 结尾的文件中查看其背后的代码。这些 Story 使用组件 Story 格式 (CSF) 编写，这是一种基于 ES6 模块的编写组件示例的标准。

让我们从 Button 组件开始。Story 是一个对象，描述了如何渲染相关组件。以下是如何在“primary”状态下渲染 Button 并导出一个名为 Primary 的 Story。

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

通过点击 Storybook 侧边栏中的 Button 来查看渲染结果。注意 args 中指定的值是如何用来渲染组件并与 Controls 选项卡中表示的值相匹配的。在 Story 中使用 args 还有其他好处

• Button 的回调函数记录在 Actions 选项卡中。点击试试看。
• Button 的参数可以在 Controls 选项卡中动态编辑。调整控件。

使用 Story

Storybook 使得一次只处理一个组件的某个状态（即一个 Story）变得容易。当您编辑组件的代码或其 Story 时，Storybook 将在浏览器中即时重新渲染。无需手动刷新。

创建新 Story

如果您正在处理一个尚未有任何 Story 的组件，可以点击侧边栏中的 ➕ 按钮搜索您的组件，并为您创建一个基本 Story。

您也可以为新 Story 创建一个 Story 文件。我们建议复制/粘贴一个现有 Story 文件到组件源文件旁边，然后根据您的组件进行调整。

如果您正在处理的组件已有其他 Story，可以使用 Controls 面板调整控件的值，然后将这些更改保存为一个新的 Story。

或者，如果您愿意，可以直接编辑 Story 文件的代码，为您的 Story 添加一个新的命名导出。

编辑 Story

使用 Controls 面板，更新 Story 的控件值。然后您可以将更改保存到 Story，Story 文件的代码将为您更新。

当然，您也可以直接更新 Story 的代码。

Story 也可用于检查 UI 在您进行更改后是否仍然正确。 Button 组件有四个 Story，展示了它在不同使用场景下的状态。现在查看这些 Story，确认您对 Primary 的更改没有在其他 Story 中引入意外错误。

在开发时检查组件的 Story 有助于防止意外的回归问题。 与 Storybook 集成的工具可以为您自动化此过程。

现在我们已经了解了 Story 的基本结构，接下来看看如何使用 Storybook 的 UI 来开发 Story。