根据选择的参数更改 ArgTypes

Question

有没有办法来动态改变ArgTypes时，args在一个童话成分的变化？

例如，假设一个故事的组件有 2 个控件：id和value。 id可以是1或2。如果id == '1'那样argTypes.value.control.min = 0，否则argTypes.value.control.min = -100。

示例代码：

export default {
  argTypes: {
    id: { control: { type: 'select', options: ['1', '2']}},
    value: { control: {type: 'range', min:0, max: 100, step:10}},
  }
};

const Template = (args) => <MyComponent {...args} />;

export const Example = Template.bind({});
Template.args = {
  id: '1',
  value: 0,
};

Answer 1

您可以使用两个不同的参数和一个if属性来做到这一点。

...
argTypes: {
    id: { control: { type: 'select', options: ['1', '2']}},
    valueNatural: {
      control: {type: 'range', min:0, max: 100, step:10},
      if: {arg: 'id', eq: '1'}
    },
    valueInteger: {
      control: {type: 'range', min:-100, max: 100, step:10},
      if: {arg: 'id', eq: '2'}
    }
  }