在开发 React 组件时，我们需要经常查看组件在不同背景下的呈现效果，以确保其在各种场景下都具有良好的可读性和可用性。这时候，一个方便的工具就是 react-storybook-addon-backgrounds-jackmccloy-fork。它是一个 Storybook addon，允许你通过简单的配置添加背景色或图片到 Storybook 中的每个组件。
在这篇文章中，我们将介绍 react-storybook-addon-backgrounds-jackmccloy-fork 的使用方法，包括安装、配置、使用案例等。让我们一起开始！
安装
react-storybook-addon-backgrounds-jackmccloy-fork 可以通过 npm 安装，可以使用命令行进行安装：
npm install --save-dev react-storybook-addon-backgrounds-jackmccloy-fork
安装之后，我们需要在 package.json 中添加一个 scripts 命令：
"scripts": {
"storybook": "start-storybook -p 9001"
},这个命令将允许我们启动 Storybook 在 9001 端口。
配置
react-storybook-addon-backgrounds-jackmccloy-fork 的配置非常简单。我们只需要在 Storybook 的配置文件（一般为 .storybook/config.js）中添加以下代码：
import { addDecorator } from '@storybook/react';
import backgrounds from 'react-storybook-addon-backgrounds-jackmccloy-fork';
addDecorator(backgrounds([
{ name: 'twitter', value: '#00aced', default: true },
{ name: 'facebook', value: '#3b5998' },
{ name: 'instagram', value: '#517fa4' }
]));上述代码意味着我们添加了三个背景颜色。其中，name 为背景名字，value 为背景的 CSS 颜色，default 标志当前背景是否为默认背景，当 Storybook 第一次加载时，会自动设置默认的背景。
使用
在组件编写完成之后，我们可以使用 react-storybook-addon-backgrounds-jackmccloy-fork 预览组件在不同背景下的呈现效果。在 Storybook 的组件页面上，我们可以看到一个 "Backgrounds" 按钮，当我们点击这个按钮时，就会弹出背景配置菜单。
在弹出的背景配置菜单中，我们可以选择不同的背景颜色或者上传自己的背景图片。当我们选择了不同的背景之后，我们可以看到组件的呈现效果会相应地发生变化。
示例代码
下面是使用 react-storybook-addon-backgrounds-jackmccloy-fork 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - --------------- - ---- ----------------------------------------------------
------ ----------- ---- ----------------
------------------------ -------
--------------
-----------------
- ----- ---------- ------ ---------- -------- ---- --
- ----- ----------- ------ --------- --
- ----- ------------ ------ --------- -
--
-
--------------- -- -- ------------ ----在这个示例中，我们使用了 withBackgrounds 这个装饰器函数，使得我们的组件在不同的背景下都可以进行预览。我们设置了三个不同的背景：Twitter 的淡蓝色、Facebook 的深蓝色和 Instagram 的深蓝灰色。默认背景为 Twitter 的淡蓝色。
在添加完 decorator 之后，我们通过 storiesOf('MyComponent', module) 声明了一个名字为 MyComponent 的组件，然后使用 .add('default', () => <MyComponent />) 添加了一个名为 default 的组件版本。然后我们就可以在 Storybook 中查看 MyComponent 组件在不同的背景下的呈现效果了。
总结
react-storybook-addon-backgrounds-jackmccloy-fork 提供了一个非常方便的工具来快速预览我们的组件在不同背景下的呈现效果。在我们编写 React 组件时，如果需要考虑多种背景下的可用性和可读性，那么这个工具必将让你事半功倍。如果你还没有使用过它，现在就尝试一下吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e281e8991b448d3bfb