简介
@beisen/storybook-react是一个帮助前端从事者开发React组件的开源UI开发环境，它可以帮助我们快速的进行组件开发的调试和测试，并且也提供了一个方便的文档生成工具。本文将详细地介绍这款npm包的使用方法和应用场景。
安装
使用npm安装该包：
npm install --save-dev @beisen/storybook-react
如果你还没有安装 Storybook，请执行以下命令：
npx sb init
执行完上述命令后 Storybook 配置好了并生成了 /.storybook 这个文件夹。现在，添加以下 content 到 /.storybook/main.js:
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
---------- -
--------------------------
--------------------------------------
--
--------- -
-------------------------
------------------------------
--
--------------- -------- -- -
-- --- -------
-----------------------------
-------- ------
----- ----------
---- --
------- ------------------------
-------- -
---------- -
----------------------- ------------------------------------ -- -------
--
--
---
---
------ -------
--
-面板面积测量
使用 @beisen/storybook-react 之后，你需要为你的组件添加一些指定的元数据来让 Storybook 生成一个好看的文档。在每一个组件的文档样例中，你需要提供这些信息：
- DSL代码示例。
- 存在的 Prop 和 Prop 设置的可选值。
- 组件的行为，如何响应各种条件。
- 使用过程中遇到的问题，及相应的解决方法。
下面，我们来看如何使用 @beisen/storybook-react 进行开发。
import React from 'react';
import { BSPannelMeasure } from '@beisen/storybook-react';
export default {
title: '组件/BSPannelMeasure',
component: BSPannelMeasure,
};在组件中加入 BSPannelMeasure 这个Decorator就可以看到当前容器大小了。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- --------------------------
------ ---------------
------ ------- -
------ ------------
---------- -----
----------- ------------------
--
----- ---- - ----- -- -
---- ----------------------
---------------------
------
--如果你想要通过 BSPannelMeasure 来统计的 Dom 节点大小不是组件根节点，可以指定测量容器:
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- --------------------------
------ ---------------
------ ------- -
------ ------------
---------- -----
----------- -
--------------------
--
--
-- ------
----- ----------- - --- -- -
----- --------- - ---------------------------------------------
--------------------- - ----------
--
----- ---- - ----- -- -
----- ------- - -------------
------------------ -- -
------------------------- - -------------------------------------------------
-- ----
------ -
---- ---------------- ------------- --------------- ------
---- -------------------- --------------- --------------- ------
---------------------
------
------
--
--
------ ----- ---------------- - -- -- -
------------- -----------------------
----- --
---------------
--总结
@beisen/storybook-react 对于开发组件尤其是UI组件的同学极其实用。在组件的开发中，如果能够完美的运用 @beisen/storybook-react，将会大大提升我们组件研发的效率，同时也能够使我们的组件库更加完美。希望这篇文章对你对学习和使用 @beisen/storybook-react 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/99980