學(xué)習(xí)使用react-antd-pro框架(一篇學(xué)習(xí)中的問題思考記錄)

---

框架介紹

react-antd-pro 大體上等于 react + antd + pro。官網(wǎng)對于相關(guān)技術(shù)棧的描述如下：

我們的技術(shù)棧基于 ES2015+、React、UmiJS、dva、g2 和 antd

UmiJS: 可插拔的企業(yè)級 react 應(yīng)用框架
dva: React and redux based, lightweight and elm-style framework
g2: 一套基于可視化編碼的圖形語法

問題 VS 解析

子路由頁面刷新，面包屑導(dǎo)航拿不到路由信息報錯
Q: /pages/some_dir/_layout.js 刷新拿不到routes相關(guān)信息，導(dǎo)致breadcrumb報錯
A: routes的初始化放在*/layouts/basicLayout.js*的ComponentDidMount下，因為完成渲染的順序是 子組件 -> 子組件模版 -> 外層模板，所以內(nèi)層的componentDidMount比外層早，拿到的結(jié)果為空對象。

解決方案：

放在外層組件(/layouts目錄下)的ComponentWillMount（目前看來沒有什么問題）

使用React.MenuContext的Provider和Consumer來傳值（antd-design-pro采用這種做法）

關(guān)于router切換的loading
Q: 頁面路由切換時，如何加載loading，優(yōu)化體驗
A: 在 .umirc.js 中修改 dynamicImport 插件，支持本地loading組件。官網(wǎng)相關(guān)資料 / dynamicImport

/pages/[*]/_layout.js 的 props.children 為 Null
A: 暫不知道原因，被問題困擾很久。結(jié)果是我把route下的routes鍵替換為children導(dǎo)致的。 :simle

---

總結(jié)

以上是生活随笔為你收集整理的学习antd-design-pro的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。