반응으로 주소록을 구현하는 방법

React에서 주소록을 구현하는 방법: 1. 주소록 데이터 배치를 생성합니다. 2. 사용자 목록과 이니셜 목록을 각각 담을 두 개의 DOM 컨테이너를 준비합니다. 4. .첫 글자 페이지의 id를 글자 목록의 값으로 사용합니다. 5. 해당 첫 글자 페이지의 id를 메소드에 전달한 후 h5의 scrollIntoView 메소드를 통해 해당 앵커 포인트로 점프합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.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 video tutorial"

위 내용은 반응으로 주소록을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!