外掛系統總覽

先前的技術

Swagger UI 大量採用 React 和 Redux 中找到的概念和模式。

如果您還不熟悉，以下是一些建議閱讀的內容

在以下文件中，我們不會花時間定義上述資源中涵蓋的基本概念。

注意：本節中的某些範例包含 JSX，這是一種 JavaScript 的語法擴充功能，對於編寫 React 元件很有用。

如果您不想設定能夠將 JSX 轉換為 JavaScript 的建置管線，請查看 React without JSX (reactjs.org)。您可以使用我們的 system.React 參考來利用 React，而無需將副本拉入您的專案。

系統

系統是 Swagger UI 應用程式的核心。在執行時，它是一個 JavaScript 物件，其中包含許多內容

React 元件
已繫結的 Redux 動作和 reducers
已繫結的 Reselect 狀態選取器
系統範圍內可用的元件集合
內建協助程式，例如 getComponent、makeMappedContainer 和 getStore
對 React 和 Immutable.js 程式庫的參考 (system.React、system.Im)
使用者定義的協助程式函式

當 Swagger UI 被呼叫時，會透過迭代（「編譯」）Swagger UI 提供的每個外掛程式來建立系統，透過 presets 和 plugins 組態選項。

預設值

預設值是外掛程式的陣列，透過 presets 組態選項提供給 Swagger UI。在透過 plugins 組態選項提供的任何外掛程式之前，會先編譯預設值內的所有外掛程式。請考慮以下範例

1
const MyPreset = [FirstPlugin, SecondPlugin, ThirdPlugin]
2

3
SwaggerUI({
4
  presets: [
5
    MyPreset
6
  ]
7
})

依預設，Swagger UI 包含內部 ApisPreset，其中包含一組為 Swagger UI 提供基準功能的外掛程式。如果您指定自己的 presets 選項，則需要手動新增 ApisPreset，如下所示

1
SwaggerUI({
2
  presets: [
3
    SwaggerUI.presets.apis,
4
    MyAmazingCustomPreset
5
  ]
6
})

新增其他預設值時需要提供 apis 預設值是 Swagger UI 原始設計的產物，並且可能會在下一個主要版本中移除。

getComponent

getComponent 是注入到每個容器元件中的協助程式函式，用於取得對外掛程式系統提供的元件的參考。

所有元件都應透過 getComponent 載入，因為它允許其他外掛程式修改元件。它優先於傳統的 import 陳述式。

Swagger UI 中的容器元件可以透過傳遞 true 作為 getComponent 的第二個引數來載入，如下所示

1
getComponent("ContainerComponentName", true)

這會將目前的系統對應為元件的 props。