useOf
Storybook 提供的默认块无法满足所有用例，因此您可能需要编写自己的块。
如果您的自定义文档块需要与 Storybook 的注释（即故事、元数据或组件）交互，您可以使用 useOf 钩子。传入故事、元数据或组件的模块导出，它将返回其带注释的形式（应用了参数、参数、加载器、装饰器、播放函数），然后您可以将其用于任何您想要的目的。事实上，大多数现有的块，如 Description 和 Canvas，在幕后都使用了 useOf。
以下是如何使用 useOf 钩子创建自定义块来显示故事名称的示例
// .storybook/blocks/StoryName.jsx
import { useOf } from '@storybook/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;
};{/* ButtonDocs.mdx */}
import { Meta } from '@storybook/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'
提供故事导出、元数据导出、组件导出或 CSF 文件导出，从中获取注释。
当自定义块位于 附加文档 中时，还可以通过传入字符串来获取主（第一个）故事、元数据或组件。这用作回退，因此可以在块中省略 of 属性。最常见的模式是将其用作 useOf(props.of || 'story')，如果未定义 of 属性，则将回退到主故事。
useOf('story')在附加模式下返回带注释的主故事；在非附加模式下返回错误useOf('meta')在附加模式下返回带注释的元数据；在非附加模式下返回错误useOf('component')在附加模式下返回元数据中指定的带注释的组件；在非附加模式下返回错误
validTypes
类型：Array<'story' | 'meta' | 'component'>
可以选择指定一个您的块接受的有效类型的数组。传递任何不是有效类型的内容都会导致错误。例如，Canvas 块使用 useOf(of, ['story'])，它确保它只接受对故事的引用，而不是元数据或组件。
返回值
返回值取决于匹配的类型。
EnhancedResolvedModuleExportType['type'] === 'story'
类型：{ type: 'story', story: PreparedStory }
对于故事，带注释的故事按原样返回。它们已准备就绪，这意味着它们已与项目和元数据注释合并。
EnhancedResolvedModuleExportType['type'] === 'meta'
类型：{ type: 'meta', csfFile: CSFFile, preparedMeta: PreparedMeta }
对于元数据，会返回解析后的 CSF 文件，以及准备好的带注释的元数据。也就是说，项目注释与元数据注释合并，但没有故事注释。
EnhancedResolvedModuleExportType['type'] === 'component'
类型：{ type: 'component', component: Component, projectAnnotations: NormalizedProjectAnnotations }
对于组件，会返回组件以及项目注释；没有元数据或故事注释。
请注意，钩子通常无法确定是否传递了组件或任何其他对象，因此它的行为也类似于 unknown 类型。