自定义 Swagger-UI 布局

Question

Swagger-UI 文档显示了使用

getComponent("operations")

自定义布局的示例。 这位于 Swagger-UI 使用的组件列表中。这在 React 中工作得很好。但是，它无法与其他组件一起使用。例如，如果想要获取“操作”组件，我将如何包含它？

我尝试使用

getComponent("operation")

但没有成功。我看到有默认道具。我需要向组件提供这些吗？如果是这样，将如何供应它们？在组件 Operation.jsx 中，其中一个 props 称为

operation

（请参见下文）。我的 OpenAPI 3.0 文件有

operationID

不起作用。

这是我试图获取

operation

组件的地方：

    render() {
        const {getComponent} = this.props;
        const Operations = getComponent("operations", true);
        const Operation = getComponent("operation", true);
        return (
            <div>
               //this works (from the example) 
               <Operations/>

               //this does not work 
               <Operation/>
            </div>
        )

这些是默认道具：

static defaultProps = {
    operation: null,
    response: null,
    request: null,
    specPath: List(),
    summary: ""
  }

我期望看到

getComponent(<any component>)

被渲染，但实际输出是：

AppContainer, in SwaggerComponent (at pages/index.js:18)) TypeError: null is not an object (evaluating 'y.toJS')

Answer 1

已经是 2023 年了，我仍然无法根据给定的文档显示自定义布局。

我会研究 css 来隐藏一些布局。

将整个

SwaggerUI

包裹在div元素中，并通过放置

display: none

来定位要删除的块的类别。

示例： 要隐藏操作块，你可以这样做

.swagger-main .opblock-section-request-body {
  display: none;
}