Блог

Я использую webpack в качестве своего пакета. Я пытаюсь интегрировать пользовательский интерфейс swagger для нескольких URL-адресов. "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 этого, это сработает?

Как отобразить что-то с помощью плагина верхней панели?

просто на случай, если кто-то застрянет, попробуйте это

  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" />;
};