这是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的基本故事的含义和用法。

如果对你有帮助，或者发现问题，请留言讨论，谢谢！！

閱讀更多 全職碼農 的文章

關鍵字: 系列 翻译 脚本语言