useOf

Storybook 提供的默认块不适合所有用例，因此您可能希望编写自己的块。

如果您自己的文档块需要与 Storybook 中的注解（即 stories、meta 或 components）交互，可以使用 useOf Hook。传入一个 story、meta 或 component 的模块导出，它将返回其带有注解的形式（应用了参数、args、loaders、decorators、play 函数），您可以将其用于任何需要的地方。事实上，大多数现有块，如 Description 和 Canvas，底层都使用了 useOf。

这里有一个示例，说明如何使用useOf Hook 创建一个自定义块，用于显示 story 的名称

import { useOf } from '@storybook/addon-docs/blocks';
 
/**
 * A block that displays the story name or title from the of prop
 * - if a story reference is passed, it renders the story name
 * - if a meta reference is passed, it renders the stories' title
 * - if nothing is passed, it defaults to the primary story
 */
export const StoryName = ({ of }) => {
  const resolvedOf = useOf(of || 'story', ['story', 'meta']);
  switch (resolvedOf.type) {
    case 'story': {
      return <h1>{resolvedOf.story.name}</h1>;
    }
    case 'meta': {
      return <h1>{resolvedOf.preparedMeta.title}</h1>;
    }
  }
  return null;
};

import { Meta } from '@storybook/addon-docs/blocks';
import { StoryName } from '../.storybook/blocks/StoryName';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
{/* Renders "Secondary" */}
<StoryName of={ButtonStories.Secondary} />
 
{/* Renders "Primary" */}
<StoryName />
 
{/* Renders "Button" */}
<StoryName of={ButtonStories} />

useOf

类型

(
  moduleExportOrType: ModuleExport | 'story' | 'meta' | 'component',
  validTypes?: Array<'story' | 'meta' | 'component'>
) => EnhancedResolvedModuleExportType

参数

moduleExportOrType

（必填）

类型: ModuleExport | 'story' | 'meta' | 'component'

提供 story 导出、meta 导出、component 导出或 CSF 文件导出，您可以从中获取注解。

当自定义文档块位于“附加文档”中时，也可以通过传入字符串来获取主（第一个）story、meta 或 component。这可以用作备用方案，这样您可以在文档块中省略 of prop。最常见的模式是将其用作 useOf(props.of || 'story')，如果在未定义 of prop 的情况下，它将回退到主 story。

• useOf('story') 在附加模式下返回带注解的主 story；在非附加模式下报错
• useOf('meta') 在附加模式下返回带注解的 meta；在非附加模式下报错
• useOf('component') 在附加模式下返回 meta 中指定的带注解的 component；在非附加模式下报错

validTypes

类型: Array<'story' | 'meta' | 'component'>

（可选）指定您的文档块接受的有效类型数组。传入有效类型之外的任何内容都会导致错误。例如，Canvas 文档块使用 useOf(of, ['story'])，这确保它只接受对 story 的引用，而不是 meta 或 component。

返回值

返回值取决于匹配的类型

EnhancedResolvedModuleExportType['type'] === 'story'

类型: { type: 'story', story: PreparedStory }

对于 stories，直接返回带注解的 stories。它们是“准备好的”（prepared），意味着它们已经与项目（project）和 meta 注解合并。

EnhancedResolvedModuleExportType['type'] === 'meta'

类型: { type: 'meta', csfFile: CSFFile, preparedMeta: PreparedMeta }

对于 meta，返回已解析的 CSF 文件以及准备好的带注解的 meta。也就是说，项目注解与 meta 注解合并，但不包括 story 注解。

EnhancedResolvedModuleExportType['type'] === 'component'

类型: { type: 'component', component: Component, projectAnnotations: NormalizedProjectAnnotations }

对于 components，返回 component 以及项目注解；不包括 meta 或 story 注解。

请注意，hook 常常无法确定传入的是 component 还是其他任何对象，因此它也表现得像一个未知（unknown）类型。