什么是 @kadira/react-storybook-addon-info？
@kadira/react-storybook-addon-info 是一个用于 React 组件开发、测试、文档编写的辅助工具，它基于 Storybook 编写，并具有快速修改 Props、组件行为文档化等功能。使用此工具可以让我们更加方便的使用 Storybook 来作为组件库开发的阶段使用。
安装
先安装 Storybook
npm install -g @storybook/cli
在项目根目录中执行以下命令：
npm i --save-dev @kadira/storybook-addon-info
使用
在 Storybook 中使用该插件，需要在 .storybook/addons.js 文件中添加如下代码进行引用：
import '@kadira/react-storybook-addon-info/register';
接着在 .storybook/addons.js 文件中的配置 config.js 文件中加入：
-- -------------------- ---- ------- ------ - ---------- -------- - ---- ------------------- ------ ---------- - ----------- - ---- ------------------------------------- -------------------- ------------- ------- ----- ------- ----- ------- ----- ----------- ------ ------------------ --- ---
这样，在 Storybook 以及 Node.js 中的开发者工具中都可以看到该插件的效果。
示例
接下来我们通过一个简单的例子来演示 @kadira/react-storybook-addon-info 的使用方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ -------- ---- -------------------------------------
----- ------- - ------------------- --------
------------
----- ------
----------
----------- -- ------------- ----- -- ---------- -------- --------
----- -- -
------------- -----------
--
--其中 withInfo 是使用该插件的核心函数，可以传递字符串、函数以及 React 组件。这里我们传递了一个用于显示组件的文档说明。
在 Storybook 中，我们可以看到页面右侧会出现一个面板，其中包含我们刚刚添加的文档说明。同时，我们也可以看到源代码和 Props 的相关信息。
使用注意事项
- 组件的
displayName和PropTypes必须正确设置，否则无法生效！ - 需要在 Storybook 3.1 或以上版本中使用。
- 如果对于描述内容格式有要求，可以使用 markdown 语法来书写。
总结
通过以上的介绍，我们可以看出 @kadira/react-storybook-addon-info 对于组件开发的帮助性非常大，它可以帮助我们更好地的描述组件，方便使用者了解每个组件的作用以及使用方式。同时这一方法也是理解 React Props 以及 React 组件如何被渲染的一个绝佳的教学工具。
如果可以充分合理的使用这个项目，可以让我们的前端开发效率大大提升，并且方便我们进行文档化的编写，整个团队的代码开发效率将会大大提高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/127763