現象
我是在 2.0.1 上發現的這個問題:
<a-layout-sider />
渲染到頁面上會變成 <section class="undefined-has-sider">
丟失了 layout
前綴
問題分析
排查了源碼,看了下 antd 的文件結構,發現其大體上是按組件模塊分類
那么 layout
組件自然就在 layout
文件夾下了。
定位到 layout.js
下的 generator
方法,下面是該方法的源碼截圖:
注意第 68 行到 72 行這塊代碼,不難理解這里做的是屬性合並,問題就出在了 _extends
這個工具方法,同樣看下該方法的源碼:
方法不難解讀,當瀏覽器支持 Object.assign
的時候,優先使用該方法進行屬性合並。
但是, Object.assign
最大的問題“無腦”合並,即后面的對象字段即使是 undefined
也是會覆蓋前面的屬性的。
這也是出現這個問題的關鍵。
下面的截圖是我在瀏覽器里斷點的時候,將 68 行到 72 行代碼分開執行的結果:
layout
被 undefined
無情的覆蓋了
后記
我試了下 2.1.2,還是沒有修復該問題,然后安裝了 2.2.0-beta.2 該問題修復了。
看更新日志,其中在 2.2.0-beta.1 里有這么一條
本版本重構組件 Anchor、Alert、Avatar、Badge、BackTop、Col、Form、Layout、Menu、Space、Spin、Switch、Row、Result、Rate
然后看了下源碼,那段有問題的代碼的確重寫了,現在改成這樣了
調整了合並屬性的順序。