如何在asyncapi-react组件中启用规范扩展字段的显示功能

问题解答 #

asyncapi-react组件原生支持展示x-前缀的AsyncAPI自定义扩展字段，无需二次开发改造，仅需要通过组件属性配置即可开启相关功能，操作步骤如下：

• 基础全局开启
  只需要给<AsyncApi>组件传入showExtensions={true}属性，即可全局开启所有合法位置的扩展字段展示，参考示例代码：

  import { AsyncApi } from "@asyncapi/react-component";
  // 引入组件默认样式
  import "@asyncapi/react-component/styles/default.min.css";
  
  const MyAsyncApiDoc = {
    asyncapi: '2.0.0',
    info: { /* 文档基础信息 */ },
    servers: {
      production: {
        url: 'api.example.com',
        protocol: 'wss',
        // 自定义扩展字段
        'x-environment': 'prod',
        'x-deprecated': false
      }
    }
    // 其他文档内容
  }
  
  function AsyncApiPage() {
    return (
      <AsyncApi
        schema={MyAsyncApiDoc}
        // 开启扩展字段展示
        showExtensions={true}
      />
    )
  }
  

• 自定义过滤展示的扩展字段
  如果你不需要展示所有扩展字段，仅需要展示指定字段，可以额外搭配extensions属性传入需要展示的扩展字段名数组：

  <AsyncApi
    schema={MyAsyncApiDoc}
    showExtensions={true}
    // 仅展示x-environment和x-deprecated两个扩展字段
    extensions={['x-environment', 'x-deprecated']}
  />
  

• 效果说明
  功能开启后，所有符合AsyncAPI规范允许添加扩展的对象（服务端对象、消息对象、Schema对象等）下的x-字段，都会自动展示在对应模块的专属扩展区域中，无需额外配置。
  如果你配置后没有看到扩展字段，可以先确认你使用的组件版本为v1.0.0及以上正式版本，旧测试版本的配置参数可能存在差异。

内容的提问来源于stack exchange，提问作者marknesium12