如何在ReactJS中直接传入swagger.json内容渲染Swagger UI

算力阿峰

2026-7-29

直接传入JSON内容渲染Swagger UI的方法

当然可以直接传入已获取的Swagger JSON内容，swagger-ui-react提供了spec属性来实现这一点，无需通过URL加载。

实现步骤：

确保已安装依赖：

npm install swagger-ui-react swagger-ui-css

在React组件中使用spec属性传入JSON数据：

函数组件示例

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

export default function SwaggerDocs() {
  // 假设已从Express服务器获取到swagger JSON数据
  const swaggerData = { /* 你的Swagger JSON内容 */ };

  return <SwaggerUI spec={swaggerData} />;
}

类组件示例（含数据请求）

import React from 'react';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

class SwaggerDocs extends React.Component {
  state = {
    swaggerData: null
  };

  componentDidMount() {
    // 从Express接口获取swagger.json
    fetch('/path/to/swagger.json')
      .then(res => res.json())
      .then(data => this.setState({ swaggerData: data }));
  }

  render() {
    const { swaggerData } = this.state;
    if (!swaggerData) return <div>加载API文档中...</div>;
    
    return <SwaggerUI spec={swaggerData} />;
  }
}

export default SwaggerDocs;