ant design pro plus

アント デザイン プロ プラス

公式の手順については、/master/README.zh-CN を参照してください。

ルーティングベースのページラベル表示

互換性: ^[email protected] | ^[email protected]

• ページのネストされたルーティング レンダリングをサポートします。
• 2 つのタブ ページ モードが利用可能
  • ルーティングに基づいて、各ルートは 1 つのタブ ページのみをレンダリングします。
  • ルーティング パラメータに基づいて、各ルートのすべてのパラメータのハッシュ値が計算され、異なるハッシュ値により異なるタブが表示されます。
• タブバーを修正
• 素早い操作
  • タブを更新 - window.tabsAction.reloadTab()
  • タブを閉じる - window.tabsAction.closeTab()
  • 前のタブに戻る - window.tabsAction.goBackTab()
  • 閉じて前のタブに戻る - window.tabsAction.closeAndGoBackTab()
  • 位置に対応する tabKey を取得します。パラメータが入力されていない場合は、現在アクティブな tabKey を返します - window.tabsAction.getTabKey()
  • activeKey 変更イベントをリッスンする - window.tabsAction.listenActiveChange()
• reloadable 、ヘッダー操作バーでの現在のタブ ページの更新をサポートします。
• follow 、ルーティング定義の新しい設定です。デフォルトの開き方は、すべてのタブの最後に追加します。この属性を設定して、 follow指定されたタブの後ろにタブを開くことができます (クエリ ページのデモを参照してください)。
• persistent 、ページ更新後の最後のタブの状態の復元をサポート

知らせ：

• デフォルトに戻すと最後のルートのみが返されるため、最後のルートが閉じられていない場合、最後に開いたタブが削除され、return メソッドが再度呼び出されたときに、警告が出力されるだけになります。 。
• タブ ヘッダーを修正してフッターをレンダリングする必要がある場合は、コンポーネントがタブ ヘッダーを適切に修正できるように、ProLayout が提供する footerRender の代わりに SwitchTabsLayout の footerRender 構成を使用してください。

コード構造

 ├── config
│   └── defaultSettings.ts    # 系统风格配置，新增关于 SwitchTabs 的配置
├── src
│   └── layouts
│       └── SwitchTabsLayout  # 路由加载
│   └── pages
│       └── SwitchTabsDemo    # 标签页功能展示

???

use-switch-tabs パッケージがリリースされ、use-switch-tabs を通じてリファクタリングされました。 —— 2021.06.19

ブランチの説明

v4-legacy

ant design pro V4 バージョンの機能ブランチに基づいています。

v2-legacy

元のウェアハウス名はant design pro v2 plusで、コードはこのブランチに移動されます。 ant design pro plusに名前を変更した後、 masterブランチのant design proの更新をフォローアップします。

umi/v2.x

umi@ 2.x に基づいた関数の実装。

Q&A

タブページ機能がant design pro V4からV5に移行されました。

Pro V5 ではアーキテクチャが大幅に再構築されており、実装の詳細は Umi のプラグイン メカニズムを通じて保護されています。ただし、タブ ページのコア機能は use-switch-tabs にアウトソーシングされているため、やるべき作業はそれほど多くありません。ただし、 @umijs/plugin-layoutのバージョンは0.18.0よりも低くすることはできません。そのため、 @umijs/preset-reactのバージョンは1.8.28よりも低くすることはできません。詳細については、このアップデートを参照してください。

最後に、実装の入り口が app.ts に変更されました。この入り口を通じて、関連する UI コンポーネントは V4 と比べて基本的に変更されていません。

---

補足：V5からフラットルーティングが採用され、現在のuse-switch-tabsがリダイレクトに対応したため、ページタグ機能を使用する場合はisSwitchTab異常判定を避けるためにoriginalRoutes適切に扱う必要があることに注意してください。 。

childrenベースのタブ関数を umi@ 2.x から umi@ 3.x にアップグレードする際の問題

関連する議論と分析については、umijs/umi#4425 を参照してください。最終分析により、一時的にアップグレードできない根本原因が判明しました。ただし、umi@ 3.3.8 を使用する必要があります。またはそれ以上。

パフォーマンスの問題

withSwitchTab関数を使用してページ コンポーネントをラップし、ページの繰り返しレンダリングを回避できます。 useLocationなどのフックなど、いくつかの特殊な状態がページで使用されている場合、最適化はできないことに注意してください。どうしても使用する必要がある場合は、自分でuseMemo最適化を使用できます。

ラベルのちらつき問題

#5 を切り替えるとラベルが点滅します。最初は気づかなかったのですが、後で理由がわかりました。ant-design/ant-design#25343 を参照してください。

プレビュー ページでは動的ルーティングを使用できません

Github Pagesにデプロイされ、 exportStaticが設定されているため、 /result/:id形式の動的ルーティングは使用できません。また、ログイン ロジックやその他の問題を回避するためにisProductionEnv変数を使用します。インターフェイス エラーがある場合は、関数の実装に重点を置くことができます_(:з ∠)_。