使用:empty 伪类优化 Render 结构

536 阅读1分钟

在我们的代码中,经常有这样的代码

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 如何用?附个小 dome codepen.io/Yunkou/pen/… 记住一个原则尽量不要再html 是页面的骨架,应保持绝对简介。不要在html上增判断逻辑。