多组件的故事

如果多个组件被设计为协同工作，那么编写一次渲染两个或多个组件的 story 会很有用。例如，ButtonGroup、List 和 Page 组件。

子组件

当您要文档化的组件具有父子关系时，您可以使用 subcomponents 属性将它们一起文档化。当子组件不打算单独使用，而仅作为父组件的一部分使用时，这尤其有用。

这是一个 List 和 ListItem 组件的示例

List.stories.ts|tsx

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
 
import { List } from './List';
import { ListItem } from './ListItem';
 
const meta: Meta<typeof List> = {
  component: List,
  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
};
export default meta;
 
type Story = StoryObj<typeof List>;
 
export const Empty: Story = {};
 
export const OneItem: Story = {
  render: (args) => (
    <List {...args}>
      <ListItem />
    </List>
  ),
};

请注意，通过向默认导出添加 subcomponents 属性，我们在 ArgTypes 和 Controls 表格上获得了一个额外的面板，列出了 ListItem 的 props

Subcomponents in ArgTypes doc block

子组件仅用于文档目的，并且有一些限制

子组件的 argTypes 是推断的（对于支持该功能的渲染器），不能手动定义或覆盖。
每个文档化的子组件的表格都不包含用于更改 props 值的 controls，因为 controls 始终应用于主组件的 args。

让我们来谈谈一些您可以用来缓解上述情况的技术，这些技术在更复杂的情况下尤其有用。

重用 story 定义

我们还可以通过重用 story 定义来减少 stories 中的重复。在这里，我们可以在 List 的 story 中重用 ListItem stories 的 args

List.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { List } from './List';
import { ListItem } from './ListItem';
 
//👇 We're importing the necessary stories from ListItem
import { Selected, Unselected } from './ListItem.stories';
 
const meta: Meta<typeof List> = {
  component: List,
};
 
export default meta;
type Story = StoryObj<typeof List>;
 
export const ManyItems: Story = {
  render: (args) => (
    <List {...args}>
      <ListItem {...Selected.args} />
      <ListItem {...Unselected.args} />
      <ListItem {...Unselected.args} />
    </List>
  ),
};

通过使用 args 渲染 Unchecked story，我们能够在 List 中重用来自 ListItem stories 的输入数据。

但是，我们仍然没有使用 args 来控制 ListItem stories，这意味着我们无法使用 controls 更改它们，也无法在其他更复杂的组件 stories 中重用它们。

将 children 用作 arg

我们改进这种情况的一种方法是将渲染的子组件拉取到 children arg 中

List.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { List } from './List';
 
//👇 Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';
 
const meta: Meta<typeof List> = {
  /* 👇 The title prop is optional.
   * See https://storybook.org.cn/docs/configure/#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'List',
  component: List,
};
 
export default meta;
type Story = StoryObj<typeof List>;
 
export const OneItem: Story = {
  args: {
    children: <Unchecked {...Unchecked.args} />,
  },
};

现在 children 是一个 arg，我们可以在另一个 story 中潜在地重用它。

但是，使用此方法时，您应该注意一些注意事项。

children arg，就像所有 args 一样，需要是 JSON 可序列化的。为了避免 Storybook 出错，您应该

避免使用空值
如果您想使用 controls 调整值，请使用映射
谨慎使用包含第三方库的组件

我们目前正在努力改进 children arg 的整体体验，并允许您在 control 中编辑 children arg，并允许您在不久的将来使用其他类型的组件。但目前，在实现您的 stories 时，您需要考虑这个注意事项。

创建模板组件

另一种更“基于数据”的选择是创建一个特殊的“story 生成”模板组件

List.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { List } from './List';
import { ListItem } from './ListItem';
 
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
 
const meta: Meta<typeof List> = {
  /* 👇 The title prop is optional.
   * Seehttps://storybook.org.cn/docs/configure/#configure-story-loading
   * to learn how to generate automatic titles
   */
  title: 'List',
  component: List,
};
 
export default meta;
type Story = StoryObj<typeof List>;
 
//👇 The ListTemplate construct will be spread to the existing stories.
const ListTemplate: Story = {
  render: ({ items, ...args }) => {
    return (
      <List>
        {items.map((item) => (
          <ListItem {...item} />
        ))}
      </List>
    );
  },
};
 
export const Empty = {
  ...ListTemplate,
  args: {
    items: [],
  },
};
 
export const OneItem = {
  ...ListTemplate,
  args: {
    items: [{ ...Unchecked.args }],
  },
};

这种方法设置起来稍微复杂一些，但这意味着您可以更轻松地在复合组件中重用每个 story 的 args。这也意味着您可以使用 Controls 插件更改组件的 args。