前言
在我们日常项目开发中，经常会遇到展示用户头像、空间头像、图片缩略图等相关需求。
展示头像的需求看起来似乎很简单，不就是展示一张图片吗？！如果你这样想，在你实现这个需求的时候，PM肯定会来来回回找你好几次。
我们来分析下这个需求 - 展示用户头像，这个需求都有哪些需要注意的地方呢？
- 最基本的实现-将用户的头像展示出来：
实现：根据UI视觉稿定义一个
预设容器，指定宽度、高度的位置，容纳这个头像。
- 用户头像在上传时的图片宽高比与预设容器的宽高比不一致时如何处理呢？
此时可能会有些小伙伴说，上传的时候让用户裁剪、或者是要求上传符合固定宽高比的头像都是可以的。
但并不是所有的业务场景中都有这个裁剪或者或者约束固定宽高比的条件，因为这样会提高用户的使用门槛，尤其是上传一个固定宽高、或者是宽高比的。
所以这样的情况我们也需要考虑进去！如何完美的承接这种Case~
实现：如果用户头像不满足固定的宽高比，我们可以让用户头像按照等比例缩放，自动是适配预设容器的大小。
- 有时候，PM还会提出，当用户头像不存在时，展示用户昵称的第一个字符当做头像
感受感受，是不是遇到过这样的一个需求~~~~
实现：在组件调用时支持同时传递
name、src属性，优先取src的值，不存在则取name的
- Avatar头像组件可能会被应用到不同的UI视图位置，宽度和高度都会是变化的
实现：以在组件调用时允许使用者指定
className、style，让调用方可以方便的约束样式
Up Code ~ 上码
// 定义接口类型 interface IProps { // 接收宽度、高度 size?: number; // 头像地址 src?: string; // 用户名称 name?: string; // style样式 style?: React.CSSProperties; // 类名 className?: string; } // Avatar组件 const Avatar = (props: IProps) => { // 从props中取出对应属性 const { src, name, style, className, size } = props; // 根据组件的prop值，确认最终的style样式 let sizeStyle = {}; if (size !== undefined) { sizeStyle = { width: size, height: size }; } // 最终样式 const finalStyle = { ...sizeStyle, ...style }; // 判断是否有图片地址，如果没有默认取用户名的第一个字符 if (src) { return <img className={`avatar ${className ? className : ''}`} src={src} style={finalStyle} />; } return ( <span className={`avatar ${className ? className : ''}`} style={finalStyle}> {name?.charAt(0)} </span> ); }; export default Avatar;
这里没有引入css样式，大家可以根据自己的需求，自行适配样式~~
