Storybook中如何为对象类型的属性定义argTypes？

解法 #

Storybook 6.x的argTypes不支持嵌套写法配置子属性控制项，需要使用点语法路径作为argTypes的顶级键声明嵌套属性的控制规则，同时在args中声明完整的嵌套默认结构即可。

正确配置示例 #

export default {
  title: `Components/Input/text-input`,
  argTypes: {
    value: { control: 'text' },
    disabled: { control: 'boolean' },
    required: { control: 'boolean' },
    // 嵌套属性使用完整点路径作为键名
    'label.text': { control: 'text', name: 'Label Text' },
    'label.toolTip': { control: 'text', name: 'Label Tooltip' },
    'label.position': { 
      control: 'select', 
      options: ['north', 'south', 'east', 'west'],
      name: 'Label Position'
    }
  },
  // 必须声明完整的嵌套默认args结构，否则控制项不会渲染
  args: {
    value: 'Foobar',
    required: true,
    disabled: false,
    label: {
      text: 'Label for input',
      toolTip: 'Tooltip for the input\'s label',
      position: 'east'
    }
  }
};

// 模板直接使用args即可，Storybook会自动同步点路径控制项的修改到嵌套args结构
const Template = (args) => {
  const inputEl = document.createElement('your-input-component');
  inputEl.state = args;
  return inputEl;
};

export const Default = Template.bind({});

注意事项 #

• 可以通过name属性自定义控制面板显示的字段名，避免显示label.text这种路径式的名称
• 不需要额外做扁平化/反向展开的适配，Storybook会自动处理点路径配置和嵌套args结构的双向同步，额外添加的适配逻辑反而会导致值覆盖、更新失效的问题

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