如何在React Storybook中使用Knobs插件调整模拟数据

嘿，我来帮你搞定这两个问题——怎么用Knobs调整模拟数据，以及给你的MySteps组件加上实用的旋钮控件。

一、核心思路 #

Knobs的本质就是让你在Storybook的控制面板里实时调整参数，不用改代码就能看到组件的变化效果。对于你的模拟数据steps，我们有两种常用的处理方式：要么直接编辑整个数组，要么针对单个属性精细控制。

二、针对你的代码的具体修改 #

方案1：用object旋钮直接编辑整个steps数组 #

这种方式适合需要整体修改模拟数据结构的场景，你可以在面板里直接修改数组的内容，非常灵活：

import React from 'react';
import { object } from '@storybook/addon-knobs/react';
import { MySteps } from '../../src/components/index';

// 先定义好默认的模拟数据
const defaultSteps = [
  { completed: true, title: 'xxxxxxx' },
  { completed: false, title: 'x' },
];

// 给你的Story添加上标题，方便在Storybook里识别分类
export default {
  title: 'Components/MySteps',
};

export const DefaultView = () => {
  // 添加一个object类型的旋钮，第一个参数是控件显示名称，第二个是默认值
  const dynamicSteps = object('Steps 模拟数据', defaultSteps);
  
  return (
    <div>
      <MySteps steps={dynamicSteps} />
    </div>
  );
};

方案2：针对单个属性添加独立旋钮 #

如果你想更精细地控制每一步的状态或标题，比如单独切换某一步的completed状态，或者修改标题文本，就可以给每个属性单独加控件：

import React from 'react';
import { boolean, text } from '@storybook/addon-knobs/react';
import { MySteps } from '../../src/components/index';

export default {
  title: 'Components/MySteps',
};

export const WithFineControls = () => {
  // 给第一个步骤的完成状态加开关控件
  const step1Completed = boolean('第一步 是否完成', true);
  // 给第一个步骤的标题加文本输入框
  const step1Title = text('第一步 标题', 'xxxxxxx');
  
  // 同理处理第二个步骤
  const step2Completed = boolean('第二步 是否完成', false);
  const step2Title = text('第二步 标题', 'x');

  // 用旋钮控件的值动态生成steps数组
  const dynamicSteps = [
    { completed: step1Completed, title: step1Title },
    { completed: step2Completed, title: step2Title },
  ];
  
  return (
    <div>
      <MySteps steps={dynamicSteps} />
    </div>
  );
};

三、小提示 #

• 确保你已经正确配置了Knobs插件：在.storybook/main.js的addons数组里加入'@storybook/addon-knobs'，不然控件不会显示哦。
• 如果你用的是Storybook 6.x及以上版本，Knobs已经被整合到官方的Controls插件中了，不过上面的代码在旧版Knobs里依然可以正常使用。
• 给每个Story设置清晰的标题和分类，团队成员使用起来会更顺手~

内容的提问来源于stack exchange，提问作者AnApprentice