如何在Storybook中添加带点命名的组件？

1. 先确保组件的正确导出 #

要实现Button.Icon这种嵌套组件写法，首先得在组件文件里把Icon挂载为Button的属性：

// Button.jsx
import React from 'react';
import Icon from './Icon';

const Button = ({ children, ...props }) => {
  return <button {...props}>{children}</button>;
};

// 关键：将Icon组件挂载到Button上
Button.Icon = Icon;

export default Button;

2. Storybook故事文件的两种写法 #

方式一：在Button主故事中嵌套使用 #

不需要单独注册Button.Icon，直接在Button的故事模板里嵌套调用即可：

// Button.stories.jsx
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

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

export const WithIcon = Template.bind({});
WithIcon.args = {
  children: <Button.Icon name="star" />,
};

方式二：单独注册Button.Icon为独立故事 #

如果需要单独展示Icon组件，可以在同一个stories文件里单独注册，指定清晰的故事名称：

// Button.stories.jsx
import Button from './Button';

export default {
  title: 'Components/Button',
};

// 注册Button主组件故事
export const Default = () => <Button>默认按钮</Button>;

// 注册Button.Icon的独立故事
export const Icon = () => <Button.Icon name="star" />;
Icon.storyName = 'Button.Icon';

3. 常见问题排查 #

• 确认没有漏写Button.Icon = Icon;，这是实现嵌套命名的核心
• 若用TypeScript，需补充类型定义，确保Button的类型包含Icon属性：

// Button.tsx
import React from 'react';
import Icon, { IconProps } from './Icon';

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  children?: React.ReactNode;
};

// 定义Button的类型，包含Icon子组件
const Button: React.FC<ButtonProps> & {
  Icon: React.FC<IconProps>;
} = ({ children, ...props }) => {
  return <button {...props}>{children}</button>;
};

Button.Icon = Icon;

export default Button;

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