Storybook：如何为子组件传递独立参数并通过控件修改

要让Storybook UI能直接控制每个Accordion.Item的独立属性（比如size），不用手动写死属性值，有两种实用方法：

方法一：为每个子组件单独定义args属性 #

直接在Story的args里给每个Item新增独立属性，比如item1Size、item2Size，Storybook会自动在Controls面板生成对应的控件，然后在render里把这些属性绑定到对应的子组件上。

修改后的代码示例：

export const AlternativesSizes: TStory = {
  args: {
    spacing: 'sm',
    variant: 'alternative',
    hasBackgroundColor: true,
    // 给每个子组件添加独立可控属性
    item1Size: 'large',
    item2Size: 'small'
  },
  render: (args) => (
    <Accordion {...args}>
      <Accordion.Item
        id="story-17"
        title="这个折叠面板尺寸为large"
        size={args.item1Size}
      >
        <Text>
          这是折叠面板#1的展开内容。{' '}
          <i>
            你可以使用各种HTML <sup>标签</sup>{' '}
          </i>
          <b>
            甚至可以添加链接
          </b>
          <br />
          <ul>
            <li>支持列表等多种元素</li>
            <li>支持列表等多种元素</li>
            <li>支持列表等多种元素</li>
          </ul>
        </Text>
      </Accordion.Item>
      <Accordion.Item
        id="story-18"
        title="这个折叠面板尺寸为small"
        size={args.item2Size}
      >
        这是折叠面板#2的展开内容
      </Accordion.Item>
    </Accordion>
  ),
  // 可选：手动配置控件类型，让UI更友好
  argTypes: {
    item1Size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
      description: '第一个折叠面板的尺寸'
    },
    item2Size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
      description: '第二个折叠面板的尺寸'
    }
  }
};

方法二：用数组统一管理所有子组件配置 #

如果需要控制的子组件数量较多，直接把所有Item的配置放到args的数组里，这样批量管理更方便，render时通过循环渲染子组件即可。

代码示例：

export const DynamicItems: TStory = {
  args: {
    spacing: 'sm',
    variant: 'alternative',
    hasBackgroundColor: true,
    items: [
      { 
        id: 'story-17', 
        title: '面板1', 
        size: 'large', 
        content: (
          <Text>
            这是折叠面板#1的展开内容。{' '}
            <i>
              你可以使用各种HTML <sup>标签</sup>{' '}
            </i>
            <b>
              甚至可以添加链接
            </b>
            <br />
            <ul>
              <li>支持列表等多种元素</li>
              <li>支持列表等多种元素</li>
              <li>支持列表等多种元素</li>
            </ul>
          </Text>
        )
      },
      { 
        id: 'story-18', 
        title: '面板2', 
        size: 'small', 
        content: '这是折叠面板#2的展开内容' 
      }
    ]
  },
  render: (args) => (
    <Accordion {...args}>
      {args.items.map(item => (
        <Accordion.Item
          key={item.id}
          id={item.id}
          title={item.title}
          size={item.size}
        >
          {item.content}
        </Accordion.Item>
      ))}
    </Accordion>
  ),
  argTypes: {
    items: {
      control: 'object',
      description: '所有折叠面板的配置集合'
    }
  }
};

两种方法的适用场景：

• 方法一适合子组件数量少的情况，每个属性对应独立控件，操作直观；
• 方法二适合子组件数量多的场景，便于统一管理和批量修改。

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