前言
在前端开发中，我们常常需要在 UI 开发完成后对其进行测试，而这时文本输入区已经完整无误，但对于一些组件属性值的调试和测试却很困难，这就是我们需要使用 @brycemhammond/addon-knobs 插件的原因。它可以在 React UI 中方便地编辑参数并在实时生效。
@brycemhammond/addon-knobs 简介
@brycemhammond/addon-knobs 是一个用于 React 组件的故障排除工具，可以在 UI 中提供修补程序的开发者工具面板。Knobs 插件允许我们轻松地使用跨 UI 编辑的应用程序状态来调整组件属性，以查看不同配置条件下的响应。
实战教学
首先，我们需要在项目中引入 @storybook/addons 和 @storybook/react-devkit。If you haven't already, you can install these packages using npm:
npm install --save-dev @storybook/addons @storybook/react
要使用 @brycemhammond/addon-knobs，我们需要在故事配置JavaScript文件中将插件导入并注册。以下是示例代码：
-- -------------------- ---- -------
------ - ---------- ------------- - ---- -------------------
------ - --------- - ---- -----------------------------
---------------
-------- -
----- ------ ----------
------ ----------
--
----------- -
----------
------- -- ---- -------- ------- ------- -------------------
---------------
--
---
---------------------- --------
------ ----- ---------- - -
------------ -
-------- -------
------- -
- ----- ------- ------ ------ --
- ----- -------- ------ ------- --
--
--
--上面的代码做了以下三件事：
- 通过 addParameters 配置了 Knobs 的 UI 样式和故事（story）的装饰器。
- 通过 withKnobs 装饰器自动加载了 Knobs 的 UI 界面。
- 配置了一些我们需要的开始参数，比如背景色。
现在，我们创建一个简单的 Button 组件，使用 @brycemhammond/addon-knobs，可以轻松添加编辑参数。下面是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ---------- ----- -------- ----- - ---- -----------------------------
----- ------ - -- ------ -------- ----- -------- -- -- -
-------
--------
---------------- -------- - ------ - --------
--------- ------------
-------- -------
------------- ------
------ ------
--
-------------------
-
-------
---------
--
---------------- - -
--- --- ---- -- ------- ------ --- ------ --
------ -----------------
--- ---------- ----- -- --- ------ --
-------- -----------------
--- ---- ---- -- --- ----- --
----- -----------------
--- -- --- ------ --------- --
--------- ---------------
--
------------------- - -
------ ------ ----
-------- ----------
----- ---
--------- ------
--
------ ------- ----------------- -
------ ------------ ------- ------ --------
-------- ----------------- ------- -----------
----- ---------- ------ ----
--------- ------------------- -------
---在上面的代码中，我们首先从 @brycemhammond/addon-knobs 导入 withKnobs、text、boolean 和 color。我们将 Button 组件传递给 withKnobs 函数，该函数将 Button 作为第一个参数，具有以下属性的对象作为第二个参数：
- Button 派生对象的默认属性
- 你想要作为控件提供的任何其他属性.
这些属性将当作编辑器的参数呈现，我们可以在故事中更改他们。通过添加以下行来启用此功能：
export default withKnobs(Button, {
label: text('Button Label', 'Click Me'),
bgColor: color('Background Color', '#3385ff'),
size: text('Font Size', 16),
disabled: boolean('Disabled', false),
});所有这些控件参数都必须是 docgen 注释中 @propType 的属性。
现在，我们可以在 UI 中调整 „Button Label“、„Font Size“、「Background Color」和「Disabled」属性，以便测试各种不同操作条件下 Button 的行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128083