React集成Swagger-UI相关问题

首先定义一个MySwaggerUI组件。有尝试过通过swagger-ui-react包直接使用，但是遇到了有个始终没有解决的问题，最后还是用了swagger-ui。

import SwaggerUI from "swagger-ui";

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

 

export const MySwaggerUI:React.FC<MySwaggerUIPrpos> = ({doc,...props}) => {

React.useEffect(()=>{

SwaggerUI({

    dom_id: "#swaggerUIApp",

    url: doc,

   });

},[])

return (

<div className="my-swagger-ui-container" id="swaggerUIApp" />

)

}

 

然后直接在需要的地方使用。这里在使用的时候，需要传入显示的yaml文件的url，可以用url-loader进行处理。

{

test: /\.(png|svg|jpg|jpeg|gif|ico|ya?ml)$/,

use: [{

loader: 'url-loader',

options: {

   limit: 10000,

 }

}],

},

 

< MySwaggerUI doc={api.yaml}/>

 

如果直接使用会在标题下面显示引用的yaml文件链接，如果不想显示这个链接，可以通过设置去除：

 

const HideInfoUrlPartsPlugin = () => {

return {

   wrapComponents: {

       InfoUrl: () => () => null

      }

   }

}

 

SwaggerUI({

    dom_id: "#swaggerUIApp",

    url: doc,

    plugins: [

       HideInfoUrlPartsPlugin // <---- Apply the plugin

    ],

});

 

通过HideInfoUrlPartsPlugin可以使得标题下面的链接不显示。参考自：https://www.thinbug.com/q/49610988