React 基础案例 | 支持左右按钮点击查看信息的卡片组件(二)
一、开篇
大家好,本篇文章小编将和大家一起实现一个用左右点击的方式翻看卡片信息的组件,这个组件很常用,一般会在网站上显示案例或团队成员的信息。通过本案例我们继续练习 useState Hook 在实际案例场景中的应用。
二、案例展示
如下视频所示,一个展示个人信息的卡片,我们可以点击卡片下方的左右按钮进行切换卡片的信息,用户的信息循环展示(信息数组的两端头尾连接循环),同时加了一个随机显示的按钮,点击按钮随机显示用户的信息。
三、创建项目
开始之前,我们通过 create-react-app 命令创建项目文件夹 reviews,接下来删除一些不相关的文件,保留 App.js、index.css、index.js,index.js 文件内容如下:
import React from 'react';
import Review from './Review';
function App() {return (<main><p className="container"><div className="title"><h2>our reviews</h2><div className='underline'></div></div><Review/></p></main>);
}export default App;//src/app.js
从上述代码你可以看出我们引入了 Review 卡片组件,也是本案例的核心,稍后我会介绍到。
四、设计本地数据结构
展示信息,需要有相关的数据,本案例将用本地文件数据。本地的数据结构比较简单,一个数组对象,包含 id、name(姓名)、job(岗位)、image(头像)、text(介绍),接下来我们新建一个 data.js 的文件,定义 reviews 对象变量,代码示例如下:
const reviews = [{id: 1,name: 'susan smith',job: 'web developer',image:'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg',text:"I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",},...
];export default reviews;// src/data.js
五、完善CSS文件
基于页面,我们新建 index.css 文件,定义卡片的展示样式,示例代码如下,由于代码比较简单,这里就不过多解释了,这里只展示卡片的基础样式,完整代码,请查看文末获取方式。
/*
===============
Variables
===============
* 省略/
....
/*
===============
Reviews
===============
*/
main {min-height: 100vh;display: grid;place-items: center;
}
.title {text-align: center;margin-bottom: 4rem;
}
.underline {height: 0.25rem;width: 5rem;background: var(--clr-primary-5);margin-left: auto;margin-right: auto;
}
.container {width: 80vw;max-width: var(--fixed-width);
}
.review {background: var(--clr-white);padding: 1.5rem 2rem;border-radius: var(--radius);box-shadow: var(--light-shadow);transition: var(--transition);text-align: center;
}
.review:hover {box-shadow: var(--dark-shadow);
}
.img-container {position: relative;width: 150px;height: 150px;border-radius: 50%;margin: 0 auto;margin-bottom: 1.5rem;
}
.person-img {width: 100%;display: block;height: 100%;object-fit: cover;border-radius: 50%;position: relative;
}
.quote-icon {position: absolute;top: 0;left: 0;width: 2.5rem;height: 2.5rem;display: grid;place-items: center;border-radius: 50%;transform: translateY(25%);background: var(--clr-primary-5);color: var(--clr-white);
}
.img-container::before {content: '';width: 100%;height: 100%;background: var(--clr-primary-5);position: absolute;top: -0.25rem;right: -0.5rem;border-radius: 50%;
}
.author {margin-bottom: 0.25rem;
}
.job {margin-bottom: 0.5rem;text-transform: uppercase;color: var(--clr-primary-5);font-size: 0.85rem;
}
.info {margin-bottom: 0.75rem;
}
.prev-btn,
.next-btn {color: var(--clr-primary-7);font-size: 1.25rem;background: transparent;border-color: transparent;margin: 0 0.5rem;transition: var(--transition);cursor: pointer;
}
.prev-btn:hover,
.next-btn:hover {color: var(--clr-primary-5);
}
.random-btn {margin-top: 0.5rem;background: var(--clr-primary-10);color: var(--clr-primary-5);padding: 0.25rem 0.5rem;text-transform: capitalize;border-radius: var(--radius);transition: var(--transition);border-color: transparent;cursor: pointer;
}
.random-btn:hover {background: var(--clr-primary-5);color: var(--clr-primary-1);
}/*src/index.css
*/
六、设计 Review 组件
接下来我们来完成本案例的核心 Review 组件,新建 Review.js 文件,用来展示卡片信息,设计思路如下:
引入 react-icons 组件,方便我们引入各种图标,比如本案例的左右箭头按钮,安装命令如下
npm install react-icons --save
引入我们刚才定义的用户数据,
import people from './data';
定义索引状态 index,用于标识当前卡片显示哪个用户信息,初始默认为数组对象的第一个,
const [index,setIndex]=useState(0);
接着分别定义用户信息状态的相关变量,用于展示用户的姓名、岗位、头像、介绍,
const {name,job,image,text}=people[index];
我们继续定义按钮相关的事件,nextPerson(下一个),prevPerson(上一个),用于改变当前用户的索引状态,所以加1或减1
为了让用户卡片信息循环显示,比如触发 prevPerson 事件时,索引状态为负值时,让索引的状态为数组索引的最后一项;同样触发 nextPerson 事件时 ,索引状态大于数组的长度时,需要更改为数组索引的第一项,这里我们定义 checkNumber 方法用于判断索引的状态,更改索引状态的值
最后我们来定义 randomPerson 事件,用于随机显示用户的信息,这里需要注意处理如果随机的索引恰好等于当前用户的索引,避免用户误以为程序点了没反应,我们需要通过索引+1的方式进行更改。
思路就聊到这里,完整的代码如下所示:
import React, { useState } from 'react';
import people from './data';
import { FaChevronLeft, FaChevronRight, FaQuoteRight } from 'react-icons/fa';const Review = () => {const [index,setIndex]=useState(0);const {name,job,image,text}=people[index];const checkNumber = (number)=>{if(number>people.length-1){return 0;}if(number<0){return people.length-1;}return number;};const nextPerson = ()=>{setIndex((index)=>{let newIndex= index + 1;return checkNumber(newIndex);});};const prevPerson =()=>{setIndex((index)=>{let newIndex=index-1;return checkNumber(newIndex);});};const randomPerson=()=>{let randomNumber=Math.floor(Math.random()*people.length);if(randomNumber===index){randomNumber=index+1;}setIndex(checkNumber(randomNumber));};return (<article className='review'><div className='img-container'><img src={image} alt={name} className='person-img'/><span className='quote-icon'>< FaQuoteRight/></span></div><h4 className='author'>{name}</h4><p className='job'>{job}</p><p className='info'>{text}</p><div className='button-container'><button className='prev-btn' onClick={prevPerson}><FaChevronLeft/></button><button className='next-btn' onClick={nextPerson}><FaChevronRight/></button></div><button className="random-btn" onClick={randomPerson}>surprise me</button></article>);
};export default Review;// src/Review.js
七、结束语
到这里,本案例就完成了,是不是很简单,点击卡片切换信息的比较常见,建议大家亲自动手练习下,大家可以点击阅读原文,在线体验,如果你想获取本案例源码,请关注“前端达人”公众号,回复“b2”。感谢你的阅读。
八、相关阅读
React 基础案例 | 提醒列表和旅游清单列表(一)
React Hooks 学习笔记 | State Hook(一)
React Hooks 学习笔记 | useEffect Hook(二)
React 基础案例 | 支持左右按钮点击查看信息的卡片组件(二)相关推荐
- React 基础案例 | 可折叠的问题列表和按分类展示的美食菜谱(三)
一.开篇 大家好,本篇文章小编将和大家一起做两个简单的案例--可折叠的问题列表和按分类展示的美食菜谱.这两个案例,我们还是继续练习 useState Hook 的用法. 在前面的两篇文章里我们已经练习 ...
- React 基础案例 | 提醒列表和旅游清单列表(一)
一.开篇 大家好,本系列文章小编将和大家一起,从最基础的真实案例实践 React Hook 相关的知识,如果你已经很熟练了 React Hook 相关内容了,本系列文章你可以忽略. 本系列文章由浅入深 ...
- 【视频互动跟踪】通过matlab提取跟踪视频中的目标,并提示备注信息。通过FLash播放器可互动点击查看信息
1.软件版本 MATLAB2010b 2.本算法理论知识 算法流程如下所示: 读取avi视频 :get_AVI.m 获取灰度视频:vedio_op.m 运动员跟踪 :func_man_catch. ...
- 【Android 插件化】Hook 插件化框架 ( Hook 实现思路 | Hook 按钮点击事件 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
- react基础06--react综合案例-电商网站导航
react基础06--react综合案例-电商网站导航 1 介绍 2 案例设计模块 2.1 分类导航数据模型设计 2.2 一级分类导航切换高亮效果 2.3 显示二级分类导航 2.4 路由跳转到二级导航 ...
- ios基础考试题1,实现按钮点击改变位置和图片的透明度和动画的使用
ios基础考试题1,实现按钮点击改变位置和图片的透明度和动画的使用 考察frame,center,bounds的坐标,改变,动画的使用,图片容器的UIImageView的透明度等知识 oc写法 // ...
- 小程序监听点击右上角按钮_朋友圈支持应用直达、公众号小程序支持行动按钮文案、原生页拉取...
微信朋友圈广告支持应用直达 (全量发布 投放管理) · 选择iOS / Android应用推广目标: · 选择微信朋友圈广告版位: · 选择图片或视频类型的基础卡片或标签卡片的创意形式: · 当推广目 ...
- android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
- 【React 基础】之 React 面向组件编程
准备工作 使用 React 开发者工具调试 复习 类 相关知识 定义 class(类),代码如下: // 创建一个 Person 类 class Person {// 构造器方法constructor ...
最新文章
- /proc/sysrq-trigger使用说明
- Linux从零到高手的进阶心得
- 这个高度站立办公十分的棒
- VB.NET怎样开发自定义Windows控件
- shiro会话监听_SpringBoot集成Shiro会话管理
- (二)ElasticSearch6.1.1 Python API
- 可用和平精英画质助手iApp源码+全开源
- 拉姆达表达式 集合操作
- java的duplicate用法_Java ByteBuffer duplicate()用法及代码示例
- 1919 Problem A	二叉排序树
- Crack:GrapeCity Documents for Excel 6.0.1
- 腾讯地图踩坑记之选点组件
- myecplice和ecplice远程调试
- android rfid 定位,基于Android手机的室内定位技术研究与实现
- 用计算机完成下表的视距测量计算公式,2012测量学计算题库及参考答案
- 基于FFmpeg4.1的视频播放器的极简实现(音视频学习笔记四)
- 电视上做独立音箱,小米的野望
- jQuery中添加元素删除元素的方法
- 考研英语阅读理解错8个,我今年会不会凉?
- 复数和向量的函数运算