我可以在 React Storybook 中创建一个旋钮来修改具有 4 个值的数组，其中每个值都有一个 select 下拉列表吗？

Question

我正在使用 React Storybook (https://github.com/storybooks/storybook/tree/next/app/react) to write stories for my ui components, and I use the knobs addon (https://github.com/storybooks/storybook/tree/next/addons/knobs) 创建实时可编辑道具...

我的应用程序是使用流类型编写的，所以我的道具是类型，我定义了这种类型以配合我的主题：

export type BoxModel =
  | [ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0];

所以我的想法是我可以使用我的主题值数组在组件上定义填充或边距

这是我的主题：

spacing: {
    xxSmall: '2px',
    xSmall: '4px',
    small: '8px',
    medium: '12px',
    larger: '16px',
    large: '24px',
    xLarge: '32px',
    xxLarge: '48px',
},

我的组件的道具（其中几个）

export type LinkStyleProps = {
  theme?: Theme,
  padding?: BoxModel,
  margin?: BoxModel,
};

所以我基本上可以使用 ['small', 'medium', 'xsmall'] 等数组在我的组件上定义边距和填充...很像 css shorthand

有没有一种方法可以创建一个旋钮，它可以拥有这个数组并且每个字段 select 都可以通过 select？

Answer 1

使用 Storybook 旋钮绝对可以做到这一点。您可以使用类似下面示例的内容。如果您愿意，您也可以执行额外的逻辑来构建少于 4 个元素的数组，您只需要 select 中的一个选项来指示并动态构建数组。

storiesOf("YourComponent", module)
  .add("with knobs", () => {
    const options = {
      none: '0',
      xxSmall: 'xxSmall',
      xSmall: 'xSmall',
      small: 'small',
      // etc.
    };
    const top = select('Top', options, '0');
    const right = select('Right', options, '0');
    const bottom = select('Bottom', options, '0');
    const left = select('Left', options, '0');
    return <YourComponent yourProp={[top, right, bottom, left]} />;
  });

我可以在 React Storybook 中创建一个旋钮来修改具有 4 个值的数组，其中每个值都有一个 select 下拉列表吗？

Can I create a Knob in React Storybook to modify an array with 4 values where each value has a select dropdown?

javascript

reactjs

flowtype

storybook