本教程操作环境：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怎么实现通讯录的详细内容，更多请关注php中文网其它相关文章！

推荐内容