前言
在现代 web 开发中，前端框架和组件库的使用越来越普遍。而在组件的开发过程中，我们需要不断地测试和调试组件，并且需要快速地展示组件效果给其他人员。因此，Storybook 应运而生。在前端开发中，Storybook 是一个非常流行的组件开发环境，它能够帮助我们快速地开发、测试和展示组件。
本文将详细介绍如何使用 @storybook/react 这个 npm 包来搭建一个 React 组件库并展示组件效果。此外，本文也会介绍一些 Storybook 的高级用法，比如如何扩展 Storybook，如何使用多个 Storybook 实例等。
安装 @storybook/react
我们需要先在项目中安装 @storybook/react。
npm i @storybook/react --save-dev
安装完成后，我们需要添加一些配置文件。在项目的根目录下添加一个名为 .storybook 的文件夹，并在该文件夹下添加一个 config.js 文件，并输入以下内容。
import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);这段代码告诉 Storybook 在 stories 文件夹下查找所有以 .stories.js 结尾的文件，并对这些文件执行故事（Story）的配置。
创建故事
现在我们已经有了一个 Storybook 的配置文件，接下来我们需要创建一个故事来展示组件效果。在 stories 文件夹下创建一个名为 Button.stories.js 的文件，并输入以下代码。
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../Button';
storiesOf('Button', module)
.add('with text', () => <Button>Hello Button</Button>)
.add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);这里我们使用了 storiesOf 和 add 方法来定义故事。storiesOf 方法表示定义了一个组件，第一个参数表示组件的名称，第二个参数表示组件所属的模块。add 方法表示向组件中添加一个故事，第一个参数表示故事的名称，第二个参数为一个回调函数，返回组件的 JSX。
现在我们已经创建好了一个简单的故事，可以运行 Storybook 并查看效果。
npm run storybook
定制样式
在组件开发中，有时候需要对组件样式进行定制。与传统的 CSS 定制不同，我们可以直接在 Storybook 中进行样式定制。
首先，我们需要在组件中添加参数（props），这些参数可以用于定制组件样式。在 Button 组件中添加一个名为 size 的参数。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ---------------
----- ------ - -- ----- -------- -- -- -
------ -
------- --------------- --------------
----------
---------
--
-
---------------- - -
----- ------------------------- --------- ---------
--
------------------- - -
----- --------
--
------ ------- -------在样式文件 Button.css 中，定义了按钮的基本样式。
-- -------------------- ---- ------- ---- - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- -------------- ---- - ---------- - -------- --- ----- ---------- ----- - ---------- - -------- ---- ----- ---------- ----- -
现在我们已经为 Button 组件添加了一个 size 参数，以及对应的样式。接下来，我们需要更新之前的 Button.stories.js 文件，以便于我们可以在 Storybook 中定制组件的样式。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ ------ ---- ------------ ------------------- ------- ---------- ------ -- -- ------------- ---------------- ---------- ---- ------- -- -- ---------- -- -- ------------ ---------- ----- ------ -- -- ------- ------------------ ---------------- ---------- ----- ------ -- -- ------- ------------------ -----------------
重新运行 Storybook，可以看到我们已经可以定制 Button 组件的样式了。
高级用法
在实际项目中，我们可能需要用到一些高级功能，比如如何为多个组件添加故事，如何在故事中添加参数（args），以及如何扩展 Storybook。接下来，我们将为大家介绍这些高级功能。
多个组件故事
我们可以将多个组件的故事写入同一个文件中（比如 stories.js 文件）。例如，我们想展示一个包含 Button、Input 和 Text 组件的演示库。我们可以创建一个如下所示的 stories.js 文件。
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- ------ ------ ---- ------------ ------ ----- ---- ----------- ------ ---- ---- ---------- ----------------------- ------- -------------- -- -- ------------- ------------ ------------- -- -- ------ ------------------ ---- ----- --- ------------ -- -- ------------ ---- ---- -------------
在运行 Storybook 后，你将看到一个 Components 的目录，其中包含 Button、Input 和 Text 三个组件的故事。
添加参数
我们可以使用 args 参数来添加一些参数，比如样式参数或者其他参数。在 Button 组件中添加一个名为 backgroundColor 的参数，并使用 args 属性来定义默认参数。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ ---------------
----- ------ - -- ----- ---------------- -------- -- -- -
------ -
------- --------------- ------------- -------- ---------------- --------------- ---
----------
---------
--
-
---------------- - -
----- ------------------------- --------- ----------
---------------- ----------------
--
------------------- - -
----- ---------
---------------- ---------
--
------ ------- -------我们可以使用 args 属性来添加参数，比如给 Button 组件添加 backgroundColor 参数，并将其定制为不同的颜色。
import { storiesOf } from '@storybook/react';
import Button from '../Button';
storiesOf('Button', module)
.add('with text', () => <Button>Hello Button</Button>, { args: { backgroundColor: '#4CAF50' }})
.add('with some emoji', () => <Button>😀 😎 👍 💯</Button>, { args: { backgroundColor: '#CC0066' }})
.add('with small size', () => <Button size="small">Small Button</Button>, { args: { backgroundColor: '#0000FF' }})
.add('with large size', () => <Button size="large">Large Button</Button>, { args: { backgroundColor: '#FF00FF' }});运行 Storybook，你将看到每个故事都有不同的背景颜色。
扩展 Storybook
我们还可以使用 addons 扩展 Storybook 的功能。比如说，我们可以使用 @storybook/addon-actions 来捕获 Button 组件的点击事件。
首先，我们需要安装 @storybook/addon-actions。
npm i -D @storybook/addon-actions
然后，在.storybook/main.js 文件中引入 addon 。
module.exports = {
addons: ['@storybook/addon-actions']
};最后，在 Button.stories.js 文件中使用 action() 属性。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- --------------------------- ------ - ------ - ---- ------------------------ ------ ------- - ------ --------- ---------- ------- -- ----- -------- - ------ -- ------- --------- --------------------------- --- ------ ----- ------- - ------------------ ------------ - - -------- ----- ------ --------- -- ------ ----- --------- - ------------------ -------------- - - ------ --------- -- ------ ----- ----- - ------------------ ---------- - - ----- -------- ------ --------- -- ------ ----- ----- - ------------------ ---------- - - ----- -------- ------ --------- --
最后，运行 Storybook 并点击按钮，你可以看到 Button 被点击时，会向控制台打印一条信息。
结束语
在本文中，我们介绍了如何使用 npm 包 @storybook/react 来搭建一个 React 组件库，并展示组件效果。我们还学习了一些比较高级的用法，比如多个组件故事、添加参数和扩展 Storybook。希望这篇文章能够给大家带来一些帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/88500