Storybook中AccordionGroup渲染函数报错，如何修复？

错误原因分析 #

1. cannot read properties of undefined (reading 'args')报错：直接通过AccordionStories.First.args访问故事参数存在风险，Storybook对导出的故事对象有内部包装处理，导致args可能无法被直接访问。
2. 之前的类型错误：未在render函数中返回JSX元素，返回值类型为void，不符合Storybook对render函数的类型要求（需返回React节点）。

解决方案 #

步骤1：抽离Accordion的props常量 #

在Accordion.stories.tsx中把各故事的args抽离为独立常量，方便跨故事复用：

import { Meta, StoryObj } from "@storybook/react";
import { Accordion } from "ui-kit";

// 抽离可复用的Accordion配置
export const AccordionProps = {
  First: {
    title: "Card one",
    children: "Lorem 1 ipsum dolor sit amet consectetur adipisicing elit. Ex alias laborum voluptate amet neque eos, sed iure debitis voluptatem molestias voluptatibus cumque in qui placeat sequi possimus maiores! Sed, numquam!",
  },
  Second: {
    title: "Card two",
    children: "Lorem 2 ipsum dolor sit amet consectetur adipisicing elit. Ex alias laborum voluptate amet neque eos, sed iure debitis voluptatem molestias voluptatibus cumque in qui placeat sequi possimus maiores! Sed, numquam!",
  },
  Third: {
    title: "Card three",
    children: "Lorem 3 ipsum dolor sit amet consectetur adipisicing elit. Ex alias laborum voluptate amet neque eos, sed iure debitis voluptatem molestias voluptatibus cumque in qui placeat sequi possimus maiores! Sed, numquam!",
  },
};

const meta = {
  title: "Accordion",
  component: Accordion,
  tags: ["autodocs"],
} satisfies Meta<typeof Accordion>;

export default meta;
type Story = StoryObj<typeof meta>;

export const First: Story = {
  args: AccordionProps.First,
};

export const Second: Story = {
  args: AccordionProps.Second,
};

export const Third: Story = {
  args: AccordionProps.Third,
};

步骤2：修改AccordionGroup的故事 #

在AccordionGroup.stories.tsx中导入抽离的AccordionProps常量，替代直接访问故事对象的args：

import { Meta, StoryObj } from "@storybook/react";
import { Accordion, AccordionGroup } from "ui-kit";
import { AccordionProps } from "./Accordion.stories";

const meta = {
  title: "AccordionGroup",
  component: AccordionGroup,
  tags: ["autodocs"],
} satisfies Meta<typeof AccordionGroup>;

export default meta;
type Story = StoryObj<typeof AccordionGroup>;

export const CardGroup: Story = {
  args: {
    title: "Group Card",
  },
  render: (args) => {
    return (
      <AccordionGroup {...args}>
        <Accordion {...AccordionProps.First} />
        <Accordion {...AccordionProps.Second} />
        <Accordion {...AccordionProps.Third} />
      </AccordionGroup>
    );
  },
};

关于单个Accordion与AccordionGroup故事的关联问题 #

分开编写单个组件和组组件的故事是合理的：

• 单个Accordion的故事用于展示组件独立用法、可配置参数，方便单独测试组件功能。
• AccordionGroup的故事用于展示组件组合场景，体现组组件的整体价值。
  二者无需强制关联，但通过抽离props常量复用配置，可减少重复代码并保持一致性。

内容的提问来源于stack exchange，提问作者surik.v