什麼是 Story？

一個 Story 會捕捉 UI 元件的渲染狀態。開發人員會為每個元件編寫多個 Story，以描述元件可以支援的所有「有趣」狀態。

當您安裝 Storybook 時，CLI 會建立範例元件，示範您可以使用 Storybook 建立的元件類型：Button、Header 和 Page。

每個範例元件都有一組 Story，顯示它支援的狀態。您可以在 UI 中瀏覽 Story，並在以 .stories.js|ts 結尾的檔案中查看其背後的程式碼。這些 Story 是以元件 Story 格式 (CSF) 編寫，這是一種基於 ES6 模組的標準，用於編寫元件範例。

讓我們先從 Button 元件開始。一個 Story 是一個物件，描述如何渲染相關元件。以下是如何在「主要」狀態下渲染 Button 並匯出名為 Primary 的 Story。

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

按一下 Storybook 側邊欄中的 Button，即可檢視其渲染結果。請注意，args 中指定的值如何用於渲染元件，並與控制項標籤中呈現的值相符。在 Story 中使用 args 還有其他好處

• Button 的回呼會記錄在動作標籤中。按一下以嘗試。
• Button 的引數可在「控制項」標籤中動態編輯。調整控制項。

使用 Story

Storybook 可讓您一次輕鬆處理一個元件的一種狀態 (又稱為 Story)。當您編輯元件的程式碼或其 Story 時，Storybook 會立即在瀏覽器中重新渲染。無需手動重新整理。

建立新的 Story

如果您正在處理尚未有任何 Story 的元件，可以按一下側邊欄中的 ➕ 按鈕以搜尋您的元件，並為您建立基本的 Story。

您也可以為新的 Story 建立 Story 檔案。我們建議將現有的 Story 檔案複製/貼上到元件原始檔旁邊，然後針對您的元件進行調整。

如果您正在處理已具有其他 Story 的元件，則可以使用控制項附加元件來調整控制項的值，然後將這些變更儲存為新的 Story。

或者，如果您願意，也可以編輯 Story 檔案的程式碼，為您的 Story 新增具名的匯出

編輯 Story

使用控制項附加元件，更新 Story 的控制項值。然後，您可以將變更儲存到 Story，並為您更新 Story 檔案的程式碼。

當然，您也可以直接更新 Story 的程式碼

Story 也可協助您檢查 UI 在您進行變更時是否仍正確顯示。Button 元件有四個 Story，顯示其在不同使用案例中的情況。現在檢視這些 Story，以確認您對 Primary 所做的變更沒有在其他 Story 中引入意外錯誤。

在開發過程中檢查元件的 Story 有助於防止意外的回歸。與 Storybook 整合的工具可以為您自動執行此操作。

現在我們已經了解 Story 的基本結構，讓我們看看如何使用 Storybook 的 UI 來開發 Story。