Storybook 的渲染功能不起作用。我做错了什么？

Question

大家！！

我的问题与基于单个手风琴列表的手风琴组的故事书渲染有关。第一步，我创建了一个 Accordion.stories.tsx 文件，然后开始创建一个 AccordionGroup.stories.tsx，它使用单个折叠组件及其故事。我尝试使用渲染结构，但它带有红色下划线。也许这是一种问题或我不明白的东西。

故事书中的错误消息：无法读取未定义的属性（读取“args”）。

Accordion.stories.tsx

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

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

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

/* First card */
export const First: Story = {
  args: {
    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 card */
export const Second: Story = {
  args: {
    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 card */
export const Third: Story = {
  args: {
    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!",
  },
};

AccordionGroup.stories.tsx

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

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

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

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

在我将“返回”添加到此处的渲染部分之前：

render: (args) => {
    return <AccordionGroup {...args}>
      <Accordion {...AccordionStories.First.args} />
      <Accordion {...AccordionStories.Second.args} />
      <Accordion {...AccordionStories.Third.args} />
    </AccordionGroup>;
  }

与类型问题相关的错误消息。如：

Type '(args: IAccordionGroupProps) => void' is not assignable to type 'ArgsStoryFn<ReactRenderer, IAccordionGroupProps>'.
  Type 'void' is not assignable to type 'StoryFnReactReturnType'.ts(2322)
index.d.ts(1163, 5): The expected type comes from property 'render' which is declared here on type 'StoryAnnotations<ReactRenderer, IAccordionGroupProps>'
(property) render?: ArgsStoryFn<ReactRenderer, IAccordionGroupProps> | undefined
Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used.

附注手风琴组件的类型：

export interface IAccordionProps {
  className?: string;
  title?: string;
  isActive?: boolean;
  children?: React.ReactNode;
}

手风琴组组件的类型：

export interface IAccordionGroupProps {
  title?: string;
  children?: ReactNode;
}

也许这样做根本就是错误的方法？在我看来，它应该为一个手风琴和一组手风琴提供一个全球故事。在我的例子中，我是分开做的。它必须相互连接，对吗？

如何解决？或者我应该怎么做才能用手风琴创作一个正确的手风琴组故事？例如这样的：

Answer 1

您的渲染函数似乎未正确格式化并返回

void

你可以尝试更换吗

render: (args) => {
    return <AccordionGroup {...args}>
      <Accordion {...AccordionStories.First.args} />
      <Accordion {...AccordionStories.Second.args} />
      <Accordion {...AccordionStories.Third.args} />
    </AccordionGroup>;
  }

与

render: (args) => (
  <AccordionGroup {...args}>
      <Accordion {...AccordionStories.First.args} />
      <Accordion {...AccordionStories.Second.args} />
      <Accordion {...AccordionStories.Third.args} />
    </AccordionGroup>
)

Answer 2

emm，请确保您的文件扩展名是

.ts

或“tsx”

JSX 应该在

.tsx

文件中使用。