简介
Storybook 是一个 UI 开发环境，它允许你浏览应用程序 UI 组件库、创建和展示交互式 UI 组件文档。react-storybook-story是一个基于 Storybook 的 React 组件库的小型库，它是一个可重用的故事组件，目的是帮助开发人员快速构建 Storybook 文档。在本篇文章中，我们将会讲解如何使用 react-storybook-story，并且通过实际的代码示例来介绍它的使用。
安装和使用
使用 react-storybook-story 之前需要确认已安装了 storybook 依赖包，如果您还没有安装 storybook，请通过npm进行安装：
npm i --save-dev @storybook/react
安装完成之后，在您的项目中使用以下命令安装 react-storybook-story：
npm i --save-dev react-storybook-story
接下来我们会通过一个 Hello World 组件来展示如何使用 react-storybook-story。
示例代码
在 src/components 中增加一个HelloWorld.js文件：
-- -------------------- ---- ------- ------ ----- ---- -------- --- - ----- ---------- -- ----- ---------- - -- -- ---------- ------------- ------ ------- -----------
在 src/stories 中增加一个HelloWorld.story.js文件：
import React from 'react';
import { storiesOf } from '@storybook/react';
import HelloWorld from '../components/HelloWorld';
storiesOf('HelloWorld', module).add('default', () => <HelloWorld />);最后运行 storybook:npm run storybook，然后访问 http://localhost:9009，即可看到HelloWorld组件的Story小节
API
Chapter
Chapter 是一个一级 Storybook 文档，由一个或多个 Story 组成。我们可以通过在 storiesOf() 函数中以第一个参数的形式传递传递一个字符串来创造它。字符串是 Chapter 的名称。
storiesOf('Button', module).add('primary', () => <Button />);Story
Story 是 Chapter 的一个界面（state）。每个 Story 都对应着在特定界面（state）下的组件。在 Story 中我们可以通过代码的形式来创造这些状态，并使用 add() 方法将状态添加到我们的 Storybook 页面中。
storiesOf('Button', module).add('primary', () => <Button />);Props
Props 是我们可以向组件传递的可配置参数。当我们在 Story 中需要测试一些不同的状态时，这个属性将非常有用。它允许你以多种方式渲染组件，测试所有的合法状态和操作。
storiesOf('Button', module)
.add('primary', () => <Button primary>Primary</Button>)
.add('secondary', () => <Button secondary>Secondary</Button>);结论
react-storybook-story 是一个非常有用的组件库，可以帮助我们快速建立 Storybook 文档。在这篇文章中我们介绍了安装和使用 react-storybook-story 的过程，并通过一个示例代码来介绍它的使用。学习如何使用它，将会对你日常的 React 开发工作非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac6cb5cbfe1ea0610a21