useOf

Storybook 提供的預設區塊並不適用於所有使用情境，因此您可能會想要撰寫自己的區塊。

如果您自己的 doc blocks 需要與 Storybook 的註解（也就是 stories、meta 或 components）介接，您可以使用 useOf hook。傳入 story、meta 或 component 的模組匯出，它會傳回其帶註解的形式（已套用 parameters、args、loaders、decorators、play function），然後您可以用於任何您想要的地方。實際上，大多數現有的區塊，例如 Description 和 Canvas，在底層都使用了 useOf。

以下範例說明如何使用 useOf hook 建立自訂區塊，以顯示 story 的名稱

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;
};

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'

提供 story 匯出、meta 匯出、component 匯出或 CSF 檔案匯出，您可從中取得註解。

當自訂區塊位於附加的文件中時，也可以透過傳入字串來取得主要（第一個）story、meta 或 component。這作為後備方案很有用，因此 of 屬性可以在您的區塊中省略。最常見的模式是將其用作 useOf(props.of || 'story')，如果未定義 of 屬性，則會回退到主要 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 會原樣傳回。它們是已準備好的，表示它們已經與專案和 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 類型。