useOf

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

如果您的自訂文件區塊需要與 Storybook 的註解（也就是 story、meta 或元件）介接，您可以使用 useOf hook。傳入 story、meta 或元件的模組匯出，它將會傳回其註解形式（已套用參數、args、載入器、裝飾器、play 函式），然後您就可以將它用於任何用途。事實上，大多數現有的區塊，例如 Description 和 Canvas，在底層都是使用 useOf。

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

// .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'

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

當自訂區塊位於已附加的文件中時，也可以傳入字串來取得主要（第一個）story、meta 或元件。這可作為後備方案，因此您的區塊可以省略 of 屬性。最常見的模式是將其用作 useOf(props.of || 'story')，如果未定義 of 屬性，則會回復為主要 story。

• useOf('story') 在附加模式下傳回已註解的主要 story；在未附加模式下則會產生錯誤
• useOf('meta') 在附加模式下傳回已註解的 meta；在未附加模式下則會產生錯誤
• useOf('component') 在附加模式下傳回 meta 中指定的已註解元件；在未附加模式下則會產生錯誤

validTypes

類型：Array<'story' | 'meta' | 'component'>

選擇性地指定您的區塊接受的有效類型陣列。傳入任何有效類型以外的內容會導致錯誤。例如，Canvas 區塊使用 useOf(of, ['story'])，這可確保它只接受對 story 的參考，而不是對 meta 或元件的參考。

回傳

回傳值取決於匹配的類型

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 類型。