前言
随着 Web 技术的日益发展，前端开发者们采用越来越多的工具来提高工作效率和代码质量。在这些工具中，npm 是一个成熟、方便、易用的包管理器，它提供了数以百万计的包供前端开发者们使用。本文将介绍一个 npm 包 @kadira/storybook-addon-actions，这是一个在制作 storybook 时非常常用的包，使用它可以让按钮、选择框等 UI 元素进行点击、选择等操作并得到相关反馈信息。
storybook 是什么
storybook 是一个 UI 组件开发环境。它基于 Webpack 和 React 来帮助我们构建单独的 UI 组件，从而让我们更好地进行组建设计、测试和文档编写。storybook 支持开箱即用的支持 React、React-Native、Vue、Angular 等主流框架，是前端开发必备的一个工具。以下是使用 storybook 做出的一个样例：
安装 @kadira/storybook-addon-actions
在使用 storybook 进行组件开发时，我们有时需要对 UI 元素进行点击、选择等交互式操作，同时得到反馈信息，这时 @kadira/storybook-addon-actions 就能帮我们解决这个问题。在安装使用 @kadira/storybook-addon-actions 前，我们需要先安装 storybook，可以使用以下命令：
npm i -g getstorybook
添加 @kadira/storybook-addon-actions 依赖包:
npm i @kadira/storybook-addon-actions --save-dev
使用 @kadira/storybook-addon-actions
使用 @kadira/storybook-addon-actions，你可以为你的 UI 元素添加事件，并响应事件时返回反馈信息。下面我们来演示一个示例，这个示例使用了 @kadira/storybook-addon-actions 来为一个按钮添加事件，并给出了事件反馈信息。
首先，你需要创建一个按钮组件 Button，启动 @kadira/storybook-addon-actions，然后为 Button 添加一个事件并返回反馈信息。下面是示例代码：
import React from 'react';
import { action } from '@kadira/storybook-addon-actions';
const Button = ({ label }) => (
<button onClick={action('button-click')}>{label}</button>
);
export default Button;以上代码中的 action('button-click') 表示为 Button 添加一个事件，当用户点击按钮时会返回一个带有指定信息的对象。这个信息将在 storybook 上显示。继续，我们在 storybook 配置文件 .storybook/config.js 中添加 @kadira/storybook-addon-actions 的配置:
-- -------------------- ---- ------- ------ - ---------- ------------ - ---- -------------------- ------ - -------- - ---- --------------------------- ------ ------- ---- ---------------------------------- ------------------ ------------ -- - -------- -- --------
这里，我们导入了两个依赖包 configure 和 setAddon，前者是 storybook 的初始化操作，后者是添加 @kadira/storybook-addon-actions 的设置。当 actions 配置到 setAddon 中时，我们就可以在我们的组件中使用 action 函数来响应事件并返回反馈信息。最后，我们在 storybook 中配置我们的 Button，如下：
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
};
export const basicButton = () => <Button label="Click Me" />;如上代码所示，在 Button 组件中，我们导入 Button 组件和 @kadira/storybook-addon-actions 的 action 函数。同时，我们将 Button 组件定义为一个名称为 basicButton 的 storybook。这样在 storybook 上，你将可以看到这个 Button 的基本样式，并且进行点击等操作时会返回日志信息。
结论
通过使用 npm 包 @kadira/storybook-addon-actions，你可以通过编写脚本文件，在 storybook 上为你的 UI 元素添加事件，这将方便你测试和调试 UI 组件的互动式操作，并返回反馈信息。上述示例代码展示了如何在 Button 上添加一个被点击的事件，以及如何在 storybook 中查看 Button 的信息反馈。在你的日常前端开发工作中，使用 @kadira/storybook-addon-actions 将成为你的必备工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/kadira-storybook-addon-actions