Reactでアドレス帳を実装する方法

アドレス帳を実装するための React メソッド: 1. アドレス帳データのバッチを作成します; 2. それぞれユーザー リストとイニシャル リストを保持する 2 つの DOM コンテナを左右に準備します; 3. ユーザー リストを生成しますおよびイニシャル リスト; 4. 最初のレター ページの ID をレター リストの値として使用します; 5. 対応する最初のレター ページの ID をメソッドに渡し、次に、scrollIntoView メソッドを通じて対応するアンカー ポイントにジャンプします。 h5.

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

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 まず、左右に 2 つの 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 最初の文字をクリックして、対応するユーザーまでスクロールします

注意してください。 2 番目のステップで画面を生成するとき、重要なステップは次のとおりです。最初の文字を追加します。レター ページの 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 メソッドを使用して、対応するアンカー ポイントにジャンプします。学習: 「

React ビデオ チュートリアル

」

以上がReactでアドレス帳を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。