是否有工具从OpenAPI规范生成React UI ?

Question

我想生成一个"开箱即用，面向客户的"(内部原因!)来自OpenAPI规范的React UI -这是我的购物清单:

• 显示API实体的列表，其中具有某种层次结构，其中它们是相关的
• 点击一个实体将显示该实体的页面、可排序、可过滤网格
• 用于添加/编辑新实体的基本UI，包括每个实体属性的类型编辑器/验证
• 允许样式/逻辑自定义，同时仍然允许重新生成UI

我知道Swagger UI项目甚至React版本，但它生成的输出非常以技术为中心，这对于实验API非常好，但对于面向客户的应用程序来说，这并不完全是我在这里所追求的——也许它可以定制，或者有人知道替代方案吗?

Answer 1

据我所知，除了swagiger -ui-react之外，您还有另一个可靠的选项stopplight -elements:

import React from 'react';
import { API } from '@stoplight/elements';
import '@stoplight/elements/styles.min.css';

function App() {
return (
<div className="App">
<API
apiDescriptionUrl="https://raw.githubusercontent.com/stoplightio/Public-APIs/master/reference/zoom/openapi.yaml"
/>
</div>
);
}
export default App;

这是一个非常好的解决方案(我们目前正在我们的一个项目中使用它)，可以使用JSON字符串呈现OAS文件。它目前适用于React和Nextjs应用程序，为了自定义，你可以导入主CSS并按你喜欢的方式编辑。