这是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的基本故事的含义和用法。
如果对你有帮助,或者发现问题,请留言讨论,谢谢!!
閱讀更多 全職碼農 的文章