如何为含children属性的Storybook子组件配置Args？

方案1：在主组件的Meta中关联配置 #

修改main.stories.tsx，修正Meta类型并为子组件显式配置argTypes：

import { Meta, StoryObj } from '@storybook/react';
import MainComponent from './main-component';
import { Subcomponent } from './subcomponent';

const meta: Meta<typeof MainComponent> = {
  component: MainComponent,
  subcomponents: {
    Subcomponent,
  },
  // 为子组件的children属性配置面板项
  argTypes: {
    'Subcomponent.children': {
      description: '子组件内部渲染的内容',
      control: 'text',
      defaultValue: '默认子内容',
    },
  },
};
export default meta;

type Story = StoryObj<typeof MainComponent>;

export const Default: Story = {
  render: (args) => (
    <MainComponent>
      <Subcomponent>{args['Subcomponent.children']}</Subcomponent>
    </MainComponent>
  ),
};

方案2：为子组件单独创建Stories文件 #

若子组件需独立展示，建议单独创建subcomponent.stories.tsx，独立配置Args面板：

import { Meta, StoryObj } from '@storybook/react';
import { Subcomponent } from './subcomponent';

const meta: Meta<typeof Subcomponent> = {
  component: Subcomponent,
  argTypes: {
    children: {
      description: '子组件内部渲染的内容',
      control: 'text',
      defaultValue: '默认子内容',
    },
  },
};
export default meta;

type Story = StoryObj<typeof Subcomponent>;

export const Default: Story = {
  args: {
    children: '默认子内容',
  },
};

核心要点 #

• Storybook无法自动识别PropsWithChildren中的隐式children属性，必须在argTypes中显式声明
• 主组件关联子组件时，需用子组件名称.属性名的格式指定argTypes
• 配置control: 'text'后，Args面板会生成文本输入框，支持实时修改子组件内容

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