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

我正在使用React Storybook（）为我的ui组件编写故事，并使用knobs插件（）创建实时可编辑的道具

我的应用程序是使用流类型编写的，因此我的道具是类型，我已定义此类型以与我的主题一起使用：

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

导出类型BoxModel=
|[ThemeSpacing | 0]
|[移动| 0，移动| 0]
|[移动| 0，移动| 0，移动| 0]
|[移动| 0，移动| 0，移动| 0，移动| 0]；

因此，我的想法是，我可以使用我的主题值数组来定义组件上的填充或边距

这是我的主题：

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

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

因此，我基本上可以使用类似

['small'，medium'，xsmall']

等数组来定义组件的边距和填充。。。很多人喜欢css速记

---

有没有一种方法可以创建一个旋钮，使其具有此阵列，并通过选择按钮选择每个字段？

使用故事书旋钮绝对可以做到这一点。您可以使用下面的示例。如果您愿意，还可以执行其他逻辑来构建少于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]} />;
  });

storiesOf（“您的组件”，模块）
.添加（“带旋钮”，（）=>{
常量选项={
无：“0”，
xxSmall:“xxSmall”，
xSmall:'xSmall'，
小：“小”，
//等等。
};
const top=select（'top'，options，'0'）；
const right=select（'right'，options，'0'）；
const bottom=select（'bottom'，options，'0'）；
const left=select（'left'，options，'0'）；
返回；
});

谢谢！这太棒了，给我指明了正确的方向。我不知道旋钮是如此灵活，这为我用这些更复杂的道具制作组件故事开辟了一条全新的途径！干杯