這是Storybook翻譯系列第二篇，教你如何寫故事

翻譯正文

顧名思義，Storybook就是就是寫故事。通常情況一個故事包含一個組件的一種狀態，就像一個組件的測試用例。

從技術上講，一個故事就是一個可以把組件渲染到屏幕上的一個函數。

一本Storybook，包含了多個故事。

在哪裡寫故事？

一般沒有明確規定。但是大家約定成俗，一般和組件寫在一起，更加容易維護。

比如：

• 故事和組件在一起

•
└── src
 └── components
 └── button
 ├── button.js
 └── button.stories.js

• 在組件目錄裡

•
└── src
 └── components
 └── button
 ├── button.js
 └── stories
 └── button.stories.js

• 在組件外

•
├── src
│ └── components
│ └── button.js
└── stories
 └── button.stories.js

在你的項目或團隊中，你可以選擇上面任何一種方案。

開始寫故事

下面是一個基本的故事（假設我們有一個叫Button的組件，在src/components/Button.js）：

我們將添加Button的故事如下：

將會使用到Storybook的基本API，更高級的功能可以參考Storybook官網和第三方插件。

動態加載故事

有時候，我們需要動態加載故事，而不是在配置文件中配置故事。
比如，你的應用中的故事都在src/components目錄裡，且以.stories.js作為後綴。那麼在.storybook/config.js文件中可以這樣動態加載：

Storybook使用了Webpack的require.context實現的動態加載，如果想深入瞭解，可以去webpack官網看下require.context的文檔。
需要特別注意的是，React Native 打包器會在構建時解析所有的引入，因此不能實現動態加載。不過，有第三方實現了動態加載，請參考 react-native-storybook-loader。

裝飾器的使用

裝飾器是一種用通用組件包裝故事的一種方式。以下是集中所有組件的示例：

這個是僅僅將裝飾器應用到當前的故事集。在此示例中，裝飾器僅添加到MyComponent故事組。
當然了，裝飾器也可以應用到所有的故事集上。比如在storybook的配置文件：

使用Markdown

從Storybook3.3版本開始，Markdown被設置為默認使用。用戶可以導入一個md文件，Storybook會自動提取md中的文本，然後可以在支持markdown的任何插件中使用該字符串，例如notes和info 

故事嵌套

故事可以使用'/'作為嵌套分隔符。

基於__dirname生成嵌套路徑

嵌套路徑可以使用模板文字以編程方式生成，因為故事名稱是字符串。比如：

當然，這個案例需要使用babel-plugin-macros

運行多個故事書

通過在啟動腳本中指定不同的端口號，可以在單個存儲庫中為不同類型的故事或組件構建多個故事書

總結

這篇篇幅稍微長點，在翻譯過程中，我也瞭解到了storybook的基本故事的含義和用法。

如果對你有幫助，或者發現問題，請留言討論，謝謝！！

閱讀更多 全職碼農 的文章

關鍵字: 系列 翻譯 腳本語言