当我们开发前端程序并与后端 API 交互时， API 的可视化文档显得尤为重要，因为这可以让前端开发人员更快地理解和使用 API，从而在开发过程中提高效率。而 swagger-ui-react 是一款可以帮助我们在 React 中展示和使用 Swagger API 文档的 npm 包，这篇文章将详细介绍如何使用它。
安装 swagger-ui-react
要使用 swagger-ui-react，首先要安装它。我们可以在终端（command prompt）中执行以下命令：
npm install swagger-ui-react
在环境有问题的情况下，你可能需要使用 yarn 或 cnpm 进行安装。安装成功后我们可以在项目文件中引用 swagger-ui-react。
使用 swagger-ui-react
引用 swagger-ui-react 后，我们就可以在 React 项目中使用它了。在这里，我们会以一个简单的示例演示它的使用方法。
1. 在组件的 state 中添加 swagger 规范
在 React 组件文件的开头，我们要添加 swagger 规范。这可以通过在 state 中添加 swagger 属性来实现。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
------ ----------------------------------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
---------- --------
------- -
-------- --- -----
---------- --------
--
-------- -
--------- -
------ -
---------- ---- --- -------
-------------- -----------
------------ -
------ -
-------------- -----
--
------ -
-------------- ---------------
--
------ -
-------------- ---- -------
--
--
--
--
--
--
--
-
-------- -
------ ---------- ------------------------- ---
-
-
------ ------- --------在这个例子中，我们只是定义了一个最小的 swagger 规范，其中包含了 /users API 的 GET 请求定义。在下一步中，我们将使用这个规范来渲染 UI。
2. 使用 SwaggerUI 组件
在我们的组件的渲染方法中，我们可以通过添加 <SwaggerUI /> 引用 swagger-ui-react：
render() {
return (
<div>
<h1>My SwaggerUI</h1>
<SwaggerUI spec={this.state.swagger} />
</div>
);
}这将在组件中渲染 Swagger UI，其中包含了根据 swagger 规范生成的所有 API。
总结
这篇文章介绍了如何通过安装和使用 swagger-ui-react，将 Swagger API 文档呈现到 React 应用程序中。
当然，我们在这篇文章中只展示了一部分使用方法， swagger-ui-react 还有很多可供个性化使用的配置选项，以及其他有用的功能，例如数据过滤和操作文档。
最后，我们应该重视 Swagger API 文档，并将其作为前端开发的重要组成部分，在开发过程中更加高效和精准地与后端 API 进行交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f28f9663b0ab45f74a8ba7d