什么是 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。

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

通过单击 Storybook 侧边栏中的 Button 来查看渲染后的组件。请注意，在 args 中指定的值如何用于渲染组件，并与 Controls 选项卡中表示的值相匹配。在您的 story 中使用 args 具有其他好处

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

使用 Stories

Storybook 让您可以轻松地一次在一个状态（又名 story）下处理一个组件。当您编辑组件的代码或其 story 时，Storybook 将立即在浏览器中重新渲染。无需手动刷新。

创建一个新的 story

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

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

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

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

编辑 story

使用 Controls 插件，更新 story 的控件值。然后，您可以将更改保存到 story，并且 story 文件的代码将为您更新。

当然，您始终也可以直接更新 story 的代码

Stories 对于检查 UI 在您进行更改时是否继续看起来正确也很有帮助。Button 组件有四个 story，展示了它在不同用例中的情况。立即查看这些 story，以确认您对 Primary 的更改没有在其他 story 中引入意外的错误。

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

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