Vant Empty 组件分析

390 阅读1分钟

1.简介

空状态时的占位提示

2.组件结构

3.核心代码分析

3.1 render函数

利用jsx的语法特性,将每一部分的渲染逻辑交给对应的独立函数处理。(十分推荐)

// 图片渲染
renderImage = () => {
	return ...
}

 // 空白提示
renderDescription = () => {
}

// 可选的 按钮
renderBottom = () => {
}

return () => (
  <div class={bem()}>
  	
    <div class={bem('image')} style={getSizeStyle(props.imageSize)}>
      {renderImage()}
    </div>
    {renderDescription()}
    {renderBottom()}
  </div>
);