Storybook 是一个开源的 React 组件开发环境，它可以让我们快速官生产级别的 UI 组件。@nlabs/storybook-addons 是一个 Storybook 的插件包，它提供了一些非常实用的插件，可以帮助我们更轻松地开发和测试我们的 UI 组件，本篇文章将为大家详细介绍 @nlabs/storybook-addons 的使用方法和常见插件。
安装
通过 NPM 安装 @nlabs/storybook-addons：
npm install --save-dev @nlabs/storybook-addons
基础使用
在 Storybook 中使用 @nlabs/storybook-addons 中的插件，需要修改 .storybook/config.js，以支持 addons：
import '@nlabs/storybook-addons/register';
然后在一个 Story 文件中导入 addons：
-- -------------------- ---- -------
------ - ---------- ---- - ---- -------------------------
------ - -------- - ---- --------------------------
------ ------- -
------ ---------
----------- -
---------
---------
--
--
------ ----- ------- - -- -- -
----- ----- - ------------- ------ ------
------ -------------------------
--上面代码中，我们导入了 withInfo 和 withKnobs 这两个插件，其中 withInfo 简化了人们阅读故事的体验，添加上下文介绍和样式，并提供了复制代码的功能，常用于项目中文档的构建，而 withKnobs 则允许我们在 Storybook UI 中动态地更改组件的 Props，以更轻松地测试组件，这两个插件支持通过 export 导出一个组件，也支持通过 add 的方式附加到一个组件上。
插件列表
Info
withInfo 是一个为 Storybook 组件提供上下文信息的插件，它可以为每个组件添加说明、PropTypes、参数等具体信息，并且将这些信息放置在 Storybook 界面的右上角，方便使用者查看，它接受两个参数：
withInfo( [options: Object], [doc: string] )(storyFn: Function)
options 中的每个键都可以是：
- inline: boolean：在队列文档的范围内显示行内说明。
- header: boolean：在示例下方或标题周围放置标题。
- source: boolean：在示例下方或标题周围放置源。
- propTables: arrayOf(React.Component) | boolean：组提供者将提供一个组件数组或布尔值。
- propTablesExclude: arrayOf(React.Component)：要排除的组件数组。
- styles: object：指定为说明添加 CSS 样式的对象。
doc 是一个字符串参数，用于为组件添加说明，操作类似于 JSDoc。
Knobs
withKnobs 是 Storybook 中最常见的插件之一，它可以让我们在 UI 中更改组件的 Props，以便更好地进行测试和组件交互设计。它使用硬编码在组件中的 propsSchema 来自动生成控制组件的 UI，我们只需导入相应的 UI 控制组件，并将它们附加到组件上，即可使用 Knobs 插件。
-- -------------------- ---- ------- ------ - --------- - ---- ------------------------- ------ ------- - ------ --- -------- ----------- ------------ -- ------ ----- ------- - -- -- - ----- ----- - ------------- ------ --------- ----- -------- - ------------------- ------- ------ ------- ------------------------------------- --
Actions
withActions 让我们可以监听组件中的事件，比如 OnClick 事件或 onChange 事件，Actions 可以调用回调函数，以便我们更轻松地跟踪组件的行为，调试代码等。
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------------
----- ------ - ------- --------- -- -
------ ------- ----------------------------------
--
------ ------- -
------ ---------
----------- --------------------- -------------------
--
------ ----- ---------------- - -- -- -
-------
----------- ---
----------- -- -
------------------- ----------
--
--
--Notes
withNotes 允许我们为组件添加注释，它可以在开发组件时增加文档可读性和可理解性。
import { withNotes } from '@storybook/addon-notes';
export const ButtonWithNotes = withNotes(
'Button ボタンコンポーネント概要'
)(() => <button>Click me </button>);Options
setOptions 可以更改 Storybook 界面的选项。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------------
------------
---
- ---- -- ------- -- --- --------
- ----- --------
--
----- -----------
---
- ------ ----- ------ -- --- --- --- ---- --------
- ----- --------
--
------ -
------ -------
------- -------
------------- --
---------- -------
--
---
- --- --------- -- ------- -- --- --------
- ----- --------
--
---------- -
-----
--
---总结
@nlabs/storybook-addons 插件包提供了一些非常实用的插件，可以让我们更轻松地开发和测试 UI 组件，使我们更快速方便地将组件开发到生产级别。本篇文章向大家介绍了 @nlabs/storybook-addons 的使用方法和常见插件，希望对大家学习 React 组件开发和 UI 设计有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd881e8991b448e67e2