React Cookbook 中文版：87 个案例带你精通React 框架

30

|

第

1

章

你可以从 GitHub 网站（

https://oreil.ly/aB7BP

）下载本解决方案的源代码。

1.9 在组件开发中使用 Storybook

问题

React 应用程序是用一个个 React 组件搭建而成的。如果组件编写得当，我们是可以在

其他 React 应用程序中轻松复用这些组件的。但创建组件后，检查组件在其他情况下

是否也能正常工作并不容易。例如，在异步应用程序中，React 组件在运行时接收到

的属性可能是 undefined（未定义的）。此时这些组件仍然能正确显示吗？它会显示错

误吗？

但是，如果你在为一个复杂的应用程序创建组件，那么你的组件很难适用于所有情况。

此外，如果你团队中的用户体验（UX）开发人员

—

如果有的话

—

查看特定组件时还

需要在应用程序中到处翻找，那么可能会比较浪费时间。

如果有种方法可以将组件单独集中展示，并且还可以提供一些组件的属性示例，那么将

会很有帮助。

解决方案

Storybook 是一个用于展示不同状态下 UI 组件的工具。你可以把它当成组件状态的管理

器。实际上，Storybook 也是可以用作组件开发的工具。

如何将 Storybook 添加到项目中呢？首先用

create-react-app

创建一个 React 应用程序：

$ npx create-react-app my-app

$ cd my-app

现在我们可以把 Storybook 添加到项目中：

$ npx sb init

然后我们用

yarn

或

npm

启动 Storybook 服务器：

$ npm ...