本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react怎么实现通讯录？
react实现通讯录效果
业务描述：通过react实现一个类似通讯录的页面，并可以通过点击侧边首字母跳转到对应的用户
大致效果
步骤
1，先造一批假数据
const users = [ [ {id: 0, name:"a",imgurl:white}, {id: 1, name:'ahat',imgurl:sysimg4}, {id: 2, name:'aocial',imgurl:sysimg4}, {id: 3, name:'aircle',imgurl:sysimg4}, ], [ {id: 4, name:"b",imgurl:white}, {id: 5, name:'bhat',imgurl:sysimg4}, {id: 6, name:'bocial',imgurl:sysimg4}, {id: 7, name:'bircle',imgurl:sysimg4}, ] , [ {id: 8, name:"c",imgurl:white}, {id: 9, name:'chat',imgurl:sysimg4}, {id: 10, name:'cocial',imgurl:sysimg4}, {id: 11, name:'circle',imgurl:sysimg4}, ] , [ {id: 12, name:"d",imgurl:white}, {id: 13, name:'dhat',imgurl:sysimg4}, {id: 14, name:'docial',imgurl:sysimg4}, {id: 15, name:'dircle',imgurl:sysimg4}, ] , [ {id: 16, name:"e",imgurl:white}, {id: 17, name:'ehat',imgurl:sysimg4}, {id: 18, name:'eocial',imgurl:sysimg4}, {id: 19, name:'eircle',imgurl:sysimg4}, ] ];
2生成用户列表页面
1先准备左右两个dom容器，分别用于承载用户列表和首字母列表
return ( <div classname={this.props.chatshow }> <div classname={jspage.chatright}> <div classname={jspage.pointliststyle} id="points"> {pointlists} </div> </div> <div classname={jspage.chatleft+" "+universal.columnstartcenter}> {userlists} </div> </div> )
css
.chatright{ height: 100%;width: 3%; position:fixed;right: 0;}.chatleft{ height: 100%;width: 95%;}
2通过数据分别生成用户列表和首字母列表放入上一步生成的容器中
//用户列表 var userlists=new array(); //侧栏首字母列表 var pointlists=new array(); //遍历 for(var i=0;i<users.length;i++){ //得到每个首字母对应的用户 var user=users[i]; //map遍历生成用户信息 const userlist=user.map( (number)=> <div classname={universal.rowcenter+" "+jspage.chatspan} key={number.id} id={number.name}> <img src={number.imgurl} classname={jspage.imgstyle2} ></img> <div classname={jspage.chatuserinfo+" "+universal.rowstart}> <div classname={jspage.chatuserinfospan+" "+ universal.rowcenter+" "+ jspage.fontstyle1}>{number.name}</div> <div classname={jspage.chatuserinfospan}></div> </div> </div> ) //将用户信息放入用户列表 userlists.push(userlist); //生成首字母信息 const point=<div onclick={msg=>this.scrolltoanchor(msg)} classname={jspage.pointstyle} key={user[0].name} >{user[0].name} </div> //将首字母信息放入首字母列表 pointlists.push(point); }
3 点击首字母滚动到对应用户
注意我们在第二步生成画面的时候，重要的一步：将首字母页面的id作为字母列表的值
<div classname={universal.rowcenter+" "+jspage.chatspan} key={number.id} id={number.name}>
<div onclick={msg=>this.scrolltoanchor(msg)} classname={jspage.pointstyle} key={user[0].name} >{user[0].name} </div>
这样通过点击首字母时就可以把对应首字母页面的id传到方法里，然后通过h5的scrollintoview方法跳转到对应的锚点，
scrolltoanchor (e) { // 找到锚点 var anchorelement = document.getelementbyid(e.target.innerhtml); // 如果对应id的锚点存在，就跳转到锚点 anchorelement.scrollintoview(); }
这样就可以啦
推荐学习：《react视频教程》
以上就是react怎么实现通讯录的详细内容。