前言
在前端开发中，我们常常需要使用 React 组件库来构建我们的页面。对于开发人员来说，我们需要一个可视化的工具来轻松地测试我们的组件。这时，我们就需要一个像 Storybook 这样的工具，它可以方便地展示我们的组件。
在使用 Storybook 过程中，我们通常需要使用某些插件来增强功能，而本文将介绍一款用于显示静态标记的插件，即 react-storybook-addon-static-markup。
什么是 react-storybook-addon-static-markup？
react-storybook-addon-static-markup 是一个 Storybook 插件，它允许您在 Storybook 的每个故事book 中添加静态标记。使用此插件，您可以在 Storybook 中快速轻松地创建可视化我们组件的静态标记。
如何使用 react-storybook-addon-static-markup？
要使用 react-storybook-addon-static-markup，您需要在项目中安装它。您可以使用 npm 或 yarn install。在此之后，您可以将该插件添加到您的 Storybook 配置中来使用它。
安装 react-storybook-addon-static-markup
通过 npm 安装：
npm install react-storybook-addon-static-markup --save-dev
通过 yarn 安装：
yarn add react-storybook-addon-static-markup --dev
将 react-storybook-addon-static-markup 添加到配置文件
在使用 react-storybook-addon-static-markup 前，您需要在 Storybook 配置文件中添加它。默认情况下，Storybook 的配置文件名为 .storybook/config.js。
在您的配置文件中，您可以添加以下代码：
import { configure, addDecorator } from '@storybook/react';
import { withStaticMarkup } from 'react-storybook-addon-static-markup';
addDecorator(withStaticMarkup);
configure(() => {
...
}, module);这里我们首先从 react-storybook-addon-static-markup 导入 withStaticMarkup，这将是我们添加到 Storybook 中的准备好的装饰器函数。接下来，我们调用 addDecorator 函数并将其返回结果传递给 withStaticMarkup，这将启用我们的装饰器。
然后，配置 Storybook，您可以添加您的故事 storybook，它将在 Storybook 中展示。
向 Storybook 添加静态标记
现在，我们已经配置了 react-storybook-addon-static-markup，您可以很容易地将静态标记添加到您的 Storybook。
对于每个 Storybook，您可以使用以下代码示例的方式将静态标记添加到 Storybook 之中：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------
------ ------- -
------ ---------
---------- -------
--
------ ----- ----- - -- -- -
--
------------- -----------
-----
--
------------- -----------
--
------
---
--上面代码展示了一个简单的按钮组件。该组件被导出到 Storybook 的 Basic 类型中，并且包含一个 pre 元素，其中包含组件的静态标记。这使得您可以在 Storybook 中可视化组件标记。
结语
我们已经介绍了如何使用 react-storybook-addon-static-markup，这是一款便捷的插件，它使展示您的 React 组件标记变得非常容易。现在，你可以将它应用在你的项目中，并且快速展示你的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79314