访问官网
Github
AsyncAPI 规范的 React 组件。也可作为 Web 组件使用，但不仅限于此。
概述
AsyncAPI 规范的官方 React 组件。它允许您渲染以 AsyncAPI 规范格式提供的异步 API 文档，并验证该规范。您可以使用自己的样式完全重新设计组件。
先决条件
react（版本 16.8.0 或更高）
安装
运行此命令在项目中安装组件：
npm install --save @asyncapi/react-component
查看使用 React 组件的沙盒应用程序：
在 React 中使用
查看一个简单的示例，展示如何传递内联 AsyncAPI 规范和自定义配置：
import * as React from "react";
import { render } from "react-dom";
import AsyncApiComponent, { ConfigInterface } from "@asyncapi/react-component";
const schema = `
asyncapi: '2.0.0'
info:
title: 示例
version: '0.1.0'
channels:
example-channel:
subscribe:
message:
payload:
type: object
properties:
exampleField:
type: string
exampleNumber:
type: number
exampleDate:
type: string
format: date-time
`;
const config: ConfigInterface = {
schemaID: 'custom-spec',
show: {
operations: false,
errors: false,
},
};
const App = () => <AsyncApiComponent schema={schema} config={config} />;
render(<App />, document.getElementById("root"));
在其他技术中使用
要了解如何在其他技术中使用 Web 组件或组件，请参阅：
属性
AsyncAPI React 组件的属性列表包括：
-
schema: string | AsyncAPIDocument | object | FetchingSchemaInterface
schema属性是必需的，包含 AsyncAPI 规范。使用string类型、AsyncAPIDocument类型、从 AsyncAPI Parser 解析的规范作为 JS 对象，或FetchingSchemaInterface对象从外部资源获取架构。有关其包含的内容和应该是什么样子的更多信息，请阅读 AsyncAPI 规范。 -
config?: Partial<ConfigInterface>
config属性是可选的，包含 AsyncAPI 组件的配置。有关可用配置选项的更多信息，请阅读 配置修改 文档。 此属性与默认配置连接。注意：
Partial<T>类型意味着T类型中的每个字段都是可选的。
功能
有关 AsyncAPI React 组件提供的功能列表和描述，请参阅此目录。
样式
默认样式
要使用默认样式，请按如下方式导入：
import "@asyncapi/react-component/styles/default.css";
// 或压缩版本
import "@asyncapi/react-component/styles/default.min.css";
自定义样式
AsyncAPI React 组件不设置任何全局字体。此组件允许使用您的自定义 font-family 和其他样式。
这可以通过在文件中定义样式或在使用 AsyncAPI React 组件的页面的 <head> 部分使用 <style> 标签内联定义来完成。
自定义样式示例（在 styles/custom.css 文件中定义）：
html {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
如果您在使用 Webpack 等打包工具的项目中使用该组件，请不要忘记导入自定义样式。
import "styles/custom.css";
import "@asyncapi/react-component/styles/default.min.css";
如果您使用的是独立包，可以将自定义样式作为样式表链接或内联样式放在 HTML 代码的 <head> 部分：
<head>
<!-- 自定义样式表 -->
<link rel="stylesheet" href="./styles/custom.css">
<!-- 或作为内联样式 -->
<style>
html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
</style>
<link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css">
...
</head>
自定义徽标
AsyncAPI 组件支持使用自定义徽标的选项。通过在 InfoObject 中使用 x-logo 自定义扩展，将在左上角显示徽标。
注意：只有在启用侧边栏选项时，徽标才会显示。
asyncapi: 2.2.0
info:
title: 账户服务
version: 1.0.0
description: 此服务负责处理用户注册。
x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png'
channels:
...
演示环境
本仓库附带一个演示应用程序。在您的应用程序中使用之前，请测试它以查看组件的实际效果并进行尝试。
您还可以按照开发指南中的此说明在本地运行演示应用程序。
模块
@asyncapi/react-component 包有 3 个精心制作的 JS 模块，可用于各种环境：
esm（ECMAScript 模块）旨在用于具有预定义环境的单页应用程序，如create-react-app，这些环境能够解析依赖项（通过 Webpack、Browserify 等）。当应用程序使用esm时，它也可以在服务器端使用（用于服务器端渲染等任务）。cjs（CommonJS 模块）与esm模块的用途相似，但使用 CommonJS 模块。umd（通用模块定义）是一个无依赖的模块，包含了在单页应用程序中提供 AsyncAPI 文档所需的一切（但必须单独提供 React 和 ReactDOM 依赖项），这些应用程序无法解析 npm 模块依赖项或在普通 HTML 页面中使用。我们有两种类型的压缩umd包，带有和不带有 AsyncAPI Parser 的路径：@asyncapi/react-component/browser/index.js@asyncapi/react-component/browser/without-parser.js
开发
有关如何设置开发环境、编写和运行测试、遵循项目定义的命名和架构约定的信息，请参阅开发指南。
贡献
如果您有功能请求，请将其作为问题添加或在拉取请求（PR）中提出更改。
如果您创建功能请求，请使用专门的功能请求问题模板。创建 PR 时，请遵循 CONTRIBUTING.md 文档中描述的贡献规则。
如果您有错误需要报告，请在在线代码编辑器中重现它。例如，使用 CodeSandbox。将重现的错误链接附加到您的问题报告中。使用错误报告模板记录错误。
致谢
该项目最初是在 Kyma 项目 下开发的，2019年被转移到 AsyncAPI 倡议下。
贡献者
感谢这些杰出的人们（表情符号说明）：
