使用:empty 偽類優化 Render 結構
摘要：
在我們的程式碼中，經常有這樣的程式碼
const { list = [] } = this.props
const ListItmes = list.map(() => <Itme/> )
return (
<ul>
{ !list.length...
在我們的程式碼中，經常有這樣的程式碼
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上增判斷邏輯。