swagger ui topbar 插件反应 ts

Question

我正在使用 webpack 作为我的打包器。我正在尝试为多个 url 集成 swagger UI。 "swagger-ui": "3.51.2".

import React from "react";
import SwaggerUi, { presets } from "swagger-ui";

// eslint-disable-next-line import/extensions
import SWaggerUiStandalonePreset from "swagger-ui/dist/swagger-ui-standalone-preset.js";

import "swagger-ui/dist/swagger-ui.css";

const Swagger: React.FC = () => {
  
  React.useEffect(() => {
    SwaggerUi({
      dom_id: "#swaggerContainer",
      urls: [
        {
          url: "http://petstore.swagger.io/v2/swagger.json",
          name: "test1",
        },
        {
          url: `http://petstore.swagger.io/v2/swagger.json`,
          name: "test2",
        },
      ],
      presets: [presets.apis, SWaggerUiStandalonePreset],
      plugins: [SwaggerUi.plugins.Topbar],
    });
  });

  return <div id="swaggerContainer" />;
};

export default Swagger;

我正在做这样的事情，它说，no api definitions found!，但如果我只做 url 而不是 urls，它有效吗？

如何使用topbar插件显示内容？

Answer 1

以防有人卡住，试试这个

 React.useEffect(() => {
    SwaggerUi({
      dom_id: "#swaggerContainer",
      urls: [
        {
          url: "http://petstore.swagger.io/v2/swagger.json",
          name: "test1",
        },
        {
          url: "http://petstore.swagger.io/v2/swagger.json",
          name: "test2",
        },
      ],
      plugins: [SWaggerUiStandalonePreset],
      layout: "StandaloneLayout",
    });
  });

  return <div id="swaggerContainer" />;
};

Answer 2

topbar plug URLs: 变量需要一个 url 数组和一个名称。一个潜在的问题可能是您的插件中没有 SwaggerUIBundle.plugins.DownloadUrl。此插件在浏览器中呈现 JSON 文件。

swagger ui topbar 插件反应 ts

swagger ui topbar plugin react ts

typescript

reactjs

swagger-ui

webpack