前言：本文将介绍使用 redoc-ex 包来渲染 Swagger 文档的流程，同时也将介绍一些常用的配置和使用技巧。这篇文章面向前端开发人员，你需要具备基础的前端知识和 npm 的基础使用经验。
什么是 redoc-ex？
redoc-ex 是一款基于 React 和 Redux 的 Swagger 文档渲染器，以可重用和可定制为主要目标。通过使用 redoc-ex，我们可以在我们的应用程序中嵌入 Swagger API 文档，让我们的客户和用户更好地理解我们的 API 服务。
开始使用 redoc-ex
安装
使用 npm 进行安装：
npm install --save redoc-ex
使用
渲染 Swagger 文档需要做以下几个步骤：
- 将 Swagger 文档放置在一个可以被标识的 URL 地址或本地文件路径中。
- 在你的应用程序中引入 redoc-ex 组件。
- 将 Swagger URL 或本地文件路径传递给 redoc-ex 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -----------
----- --- - -- -- -
------ -
---- ----------------
------ ---------------------------------------------------- --
------
--
--
------ ------- ----运行你的应用程序，并在浏览器中访问 http://localhost:3000 端口，你将看到 redoc-ex 渲染你的 Swagger 文档。如果你已经正确配置了 Swagger URL 或本地文件路径，那么你应该会看到 API 文档的详细内容。
在大多数情况下，上面的代码将满足我们的需求。然而，redoc-ex 也提供了许多可选配置和自定义选项。
配置选项
除了配置 Swagger URL 或本地文件路径之外，redoc-ex 还提供了一些其他的配置选项。
- scrollYOffset
number: 用户在跳转到 API 文档的特定部分时，组件会自动将该部分滚动到浏览器视图的顶部。当该选项启用时，它将指定滚动到特定部分时的 Y 偏移量。默认值为 0。 - onLoaded
function: 当 Swagger API 文档成功加载并加载完成时，redoc-ex 将调用这个回调函数（例如，用户成功加载了 API 文档）。该回调函数将从组件的父组件中被注入，并传递一个 loadData() 回调函数。 - options
object: 这个配置选项是将所有的配置选项传递给 redoc-ex 组件来自定义组件的全部行为。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -----------
----- ------- - ---------------------------------------------
----- ------- - -
-------------- ---
--------- ---------
-------- -
------ -
------- -
-------- -
----- -------
------ -------
----- ----------
--
---------- -
----- -------
------ -------
----- ----------
--
--
--
------------------- -----
-
--
----- --- - -- -- -
------ -
---- ----------------
------ ----------------- ------------ --
------
--
--
------ ------- ----结论
redoc-ex 组件提供了一种在我们应用程序中嵌入 Swagger API 文档的简单而优雅的方式。在本文中，我们详细介绍了 redoc-ex 的基本使用方法以及向组件传递选项和配置的方法。使用 redoc-ex，你可以更好地展示你的 API 文档，并让你的用户更轻松地理解你的服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596181e8991b448d6d58