Story 是什么？

Story 是什么？

Story 介绍

Story（故事）捕获 UI 组件的呈现状态。 开发人员为每个组件编写多个故事，描述组件可以支持的所有“有趣”状态。

每个组件都有一组故事，显示它支持的状态。

可以在 UI 中浏览故事，并在以 .stories.js 或 .stories.ts 结尾的文件中查看故事背后的代码。

这些故事以组件故事格式 (CSF) 编写，这是一种基于 ES6 模块的标准，用于编写组件示例。

从 Button 组件开始。 故事是描述如何呈现相关组件的函数。 以下是如何在 Primary 状态下渲染 Button 并导出一个名为 Primary 的故事。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Button.stories.ts|tsx

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
} as ComponentMeta<typeof Button>;

export const Primary: ComponentStory<typeof Button> = () => <Button primary>Button</Button>;

编写文档（可选）


<!-- Button.stories.mdx -->

import { Meta, Story } from '@storybook/addon-docs';

import { Button } from './Button';

<Meta title="Button" component={Button} />

# Button

<Story name="Primary">
  <Button primary>Button</Button>
</Story>

通过在 Storybook 侧栏中单击它来查看呈现的 Button。

args

可以进一步改进上述故事定义以利用 Storybook 的 args 概念。 Args 以机器可读的方式描述 Button 的参数。

它释放了 Storybook 动态改变和撰写论点的超能力。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// Button.stories.ts|tsx

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button, ButtonProps } from './Button';

export default {
  title: 'Button',
  component: Button,
} as ComponentMeta<typeof Button>;

//👇 我们创建了 args 如何映射到渲染的 template（模板）
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Button',
};

编写文档（可选）

<!-- Button.stories.mdx-->

import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';

<Meta title="Button" component={Button} />

<!-- 👇 我们创建了 args 如何映射到渲染的 template（模板） -->

export const Template = (args) => <Button {...args} />;

<!-- 👇 每个故事重用该模板 -->
<Story
  name="Primary"
  args={{
    primary: true,
    label: 'Button',
  }}>
  {Template.bind({})}
</Story>

两个故事示例渲染相同的内容，因为 Storybook 在渲染期间将给定的 args 属性提供给故事。

可以通过 args 获得省时的便利：

  • 按钮回调记录到 Action 选项卡中。 单击以尝试它

  • 按钮参数可在 Controls 选项卡中动态编辑。 调整控件

编辑故事

Storybook 可以轻松地一次处理一种状态（又名故事）中的一个组件。

当编辑 Button 代码或故事时，Storybook 将立即在浏览器中重新呈现。 无需手动刷新。

更新主要故事的标签，然后在 Storybook 中查看更改。

故事还有助于检查 UI 在更改时是否继续保持正确。

Button 组件有四个故事，在不同的用例中展示它。

现在查看这些故事，以确认对主要的更改没有在其他故事中引入无意的错误。

在开发时检查组件的故事有助于防止意外回归。 与 Storybook 集成的工具也可以自动化。

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

知识点

  • args

  • Action

  • Controls

此页面上有什么