如何为Storybook中子组件添加Controls控件？

• 确认子组件的props类型定义完整
  Storybook的Controls依赖组件props的类型推断生成，若DrawerHeader没有明确的类型声明，Storybook无法识别可配置的props：

  • TypeScript项目：给DrawerHeader定义清晰的Props接口，组件props严格使用该接口：

    interface DrawerHeaderProps {
      title?: string;
      showBackBtn?: boolean;
      className?: string;
    }
    
    const DrawerHeader = ({ title, showBackBtn = false, className }: DrawerHeaderProps) => {
      // 组件逻辑
    };
    

  • JavaScript项目：通过PropTypes定义每个props的类型，可搭配defaultProps补充默认值：

    import PropTypes from 'prop-types';
    
    const DrawerHeader = ({ title, showBackBtn, className }) => {
      // 组件逻辑
    };
    
    DrawerHeader.propTypes = {
      title: PropTypes.string,
      showBackBtn: PropTypes.bool,
      className: PropTypes.string,
    };
    
    DrawerHeader.defaultProps = {
      showBackBtn: false,
    };
    

• 检查Story的写法与组件注册

  • 给DrawerHeader单独编写story文件（如DrawerHeader.stories.tsx），而非仅在父组件Drawer的story中嵌套使用。独立的story会让Storybook单独解析子组件的props：

    import DrawerHeader from './DrawerHeader';
    
    export default {
      title: 'Components/DrawerHeader',
      component: DrawerHeader,
    };
    
    export const Default = {
      args: {
        title: '默认标题',
        showBackBtn: true,
      },
    };
    

  • 确保story文件在.storybook/main.js的stories配置路径范围内，比如配置为'../src/**/*.stories.@(js|jsx|ts|tsx)'时，文件路径和命名要匹配规则。

• 验证Addon Controls是否正常启用
  检查.storybook/main.js的addons数组是否包含@storybook/addon-controls，且版本与Storybook核心版本一致：

  module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
      '@storybook/addon-links',
      '@storybook/addon-controls', // 必须存在该配置项
      // 其他addons
    ],
  };
  

  若未安装，先执行npm install @storybook/addon-controls --save-dev完成安装。

• 手动指定Controls参数（自动推断失效时）
  若自动识别仍有问题，可在story的parameters中手动指定要展示的props：

  export default {
    title: 'Components/DrawerHeader',
    component: DrawerHeader,
    parameters: {
      controls: {
        include: ['title', 'showBackBtn', 'className'], // 列出需要展示的props
      },
    },
  };
  

• 清除Storybook缓存重试
  缓存可能导致组件解析异常，执行npx storybook build --clean清除缓存，或手动删除node_modules/.cache/storybook目录后重启Storybook服务。

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