react如何实现通讯录

这篇“react如何实现通讯录”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react如何实现通讯录”文章吧。 react实现通讯录的方法：1、创建一批通讯录数据；2、准备左右两个dom容器，分别用于承载用户列表和首字母列表；3、生成用户列表和首字母列表；4、将首字母页面的id作为字母列表的值；5、把对应首字母页面的id传到方法里，然后通过h6的scrollIntoView方法跳转到对应的锚点即可。react实现通讯录效果业务描述：通过react实现一个类似通讯录的页面，并可以通过点击侧边首字母跳转到对应的用户步骤1，先造一批假数据


constusers=[
[
{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(



{pointLists}



{userLists}


)

css


.chatRight{
height:100%;width:3%;
position:fixed;right:0;
}
.chatLeft{
height:100%;width:95%;
}

2通过数据分别生成用户列表和首字母列表放入上一步生成的容器中


//用户列表
varuserLists=newArray();
//侧栏首字母列表
varpointLists=newArray();
//遍历
for(vari=0;i



{number.name}



)
//将用户信息放入用户列表
userLists.push(userList);
//生成首字母信息
constpoint=this.scrollToAnchor(msg)}
className={jsPage.pointStyle}
key={user[0].name}
>{user[0].name}

//将首字母信息放入首字母列表
pointLists.push(point);
}

3 点击首字母滚动到对应用户注意我们在第二步生成画面的时候，重要的一步：将首字母页面的id作为字母列表的值

this.scrollToAnchor(msg)} className={jsPage.pointStyle} key={user[0].name} >{user[0].name} 这样通过点击首字母时就可以把对应首字母页面的id传到方法里，然后通过h6的scrollIntoView方法跳转到对应的锚点， scrollToAnchor(e){ //找到锚点 varanchorElement=document.getElementById(e.target.innerHTML); //如果对应id的锚点存在，就跳转到锚点 anchorElement.scrollIntoView(); } 以上就是关于“react如何实现通讯录”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注百云主机行业资讯频道。推荐阅读： React中setState如何使用与如何同步异步 react创建组件有哪些方法免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 react 免费云主机域名上一篇新闻： golang异步如何实现下一篇新闻： CSS的border-top属性怎么使用猜你喜欢提高开发效率Vue技巧有哪些保护Linux服务器的方法是什么 Nginx怎么配置在线一键生成神器 SpringBoot 中怎么实现异步编程 web开发中大型项目该怎么分层架构怎么解决数据库分库分表无限扩容问题分析Web服务器的Tomcat组件怎么解决数据库缓存常见问题 React中怎么实现状态自动保存 Redis集合类型如何使用

这样通过点击首字母时就可以把对应首字母页面的id传到方法里，然后通过h6的scrollIntoView方法跳转到对应的锚点，

scrollToAnchor(e){ //找到锚点 varanchorElement=document.getElementById(e.target.innerHTML); //如果对应id的锚点存在，就跳转到锚点 anchorElement.scrollIntoView(); }

以上就是关于“react如何实现通讯录”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注百云主机行业资讯频道。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。