使用:empty 偽類優化 Render 結構
在我們的程式碼中,經常有這樣的程式碼
const { list = [] } = this.props const ListItmes = list.map(() => <Itme/> ) return ( <ul> { !list.length ? <Skeleton/> : <ListItmes/> } </ul> ) 複製程式碼
Skeleton 在antd 中 3.9.2 新增 用來在需要等待載入內容的位置提供一個佔位圖。在我們的系統中,經常有資料判空的情況,如果antd 升級之後能有 Skeleton增強體驗最好不過了,有時候需要我們自己定義空資料狀態的UI。 這裡我們可以使用 :empty偽類來修飾 ul 當沒有元素的情況。 這樣做的好處,那麼結構就會變成:
<ul> <ListItmes/> </ul> 複製程式碼
試問,大家維護頁面的時候,是否先檢視render 再庖丁解牛去了解元件樹,元件樹的簡介,能讓程式碼可讀性更好。 :empty 如何用?附個小 domeofollow,noindex">codepen.io/Yunkou/pen/… 記住一個原則儘量不要再html 是頁面的骨架,應保持絕對簡介。不要在html上增判斷邏輯。