开发者社区> 胡哥有话说> 正文

从0开始实现一个好用的Avatar头像组件-React版

简介: 在我们日常项目开发中,经常会遇到展示用户头像、空间头像、图片缩略图等相关需求。 展示头像的需求看起来似乎很简单,不就是展示一张图片吗?!如果你这样想,在你实现这个需求的时候,PM肯定会来来回回找你好几次。
+关注继续查看

前言


在我们日常项目开发中,经常会遇到展示用户头像、空间头像、图片缩略图等相关需求。


展示头像的需求看起来似乎很简单,不就是展示一张图片吗?!如果你这样想,在你实现这个需求的时候,PM肯定会来来回回找你好几次。


我们来分析下这个需求 - 展示用户头像,这个需求都有哪些需要注意的地方呢?


  1. 最基本的实现-将用户的头像展示出来:


实现:根据UI视觉稿定义一个预设容器,指定宽度、高度的位置,容纳这个头像。


  1. 用户头像在上传时的图片宽高比与预设容器的宽高比不一致时如何处理呢?


此时可能会有些小伙伴说,上传的时候让用户裁剪、或者是要求上传符合固定宽高比的头像都是可以的。


但并不是所有的业务场景中都有这个裁剪或者或者约束固定宽高比的条件,因为这样会提高用户的使用门槛,尤其是上传一个固定宽高、或者是宽高比的。


所以这样的情况我们也需要考虑进去!如何完美的承接这种Case~


实现:如果用户头像不满足固定的宽高比,我们可以让用户头像按照等比例缩放,自动是适配预设容器的大小。


  1. 有时候,PM还会提出,当用户头像不存在时,展示用户昵称的第一个字符当做头像
    感受感受,是不是遇到过这样的一个需求~~~~


实现:在组件调用时支持同时传递namesrc属性,优先取src的值,不存在则取name的


  1. Avatar头像组件可能会被应用到不同的UI视图位置,宽度和高度都会是变化的


实现:以在组件调用时允许使用者指定classNamestyle,让调用方可以方便的约束样式


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样式,大家可以根据自己的需求,自行适配样式~~


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23523 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22217 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
18581 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
11974 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
21934 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
14689 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36338 0
70
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载