ReactJS 如何创建电话号码和联系人列表

我们可以假设，你已经使用移动设备给某人打电话，并看到了联系人列表。一般来说，当你在大多数移动设备上打开电话簿时，它会向你显示三个部分。第一部分是拨打自定义号码的键盘，第二部分是最近的通话，第三部分是设备中保存的联系人。

最近的联系人部分显示最近的通话，包括姓名、号码和通话时间。普通联系人列表部分显示你的联系人姓名与你的联系号码。在这里，我们将使用ReactJS的基本功能在ReactJS中设计一个联系人列表。

语法

用户可以按照下面的语法来使用ReactJS创建一个联系人列表。

<div className = "contact">
   <div className = "name"> Name </div>
   <div className = "number"> Number </div>
   <div className = "time"> Duration </div>
</div>

在上面的语法中，我们使用普通的HTML来创建一个联系卡。此外，我们还可以应用一些CSS来设计卡片。

例子

文件名 – App.js

在下面的例子中，我们已经创建了类名为’list’的div。我们在div中添加了多个带有’contact’类名的div。在具有 “联系人 “类名称的div中，我们又添加了三个div来添加姓名、号码和时间。

import React from "react";
import { useState } from "react";
import "./App.css";
export default function App() {
   return (
      <div>
         <center>
            <h2> Contact List</h2>
            <div className="list">
               <div className="contact">
                  <div className="name"> Shubham </div>
                  <div className="number"> Mobile +918233445656 </div>
                  <div className="time"> Incoming calls, 5 mins 23 secs </div>
               </div>
               <div className="contact">
                  <div className="name"> Jay </div>
                  <div className="number"> Mobile +918487874859 </div>
                  <div className="time"> Outgoing calls, 15 mins 02 secs </div>
               </div>
               <div className="contact">
                  <div className="name"> John </div>
                  <div className="number"> Mobile +911232436678 </div>
                  <div className="time"> Outgoing calls, 6 mins 10 secs </div>
               </div>
               <div className="contact">
                  <div className="name"> Alice </div>
                  <div className="number"> Mobile +919754323456 </div>
                  <div className="time"> Incoming calls, 51 mins 23 secs </div>
               </div>
            </div>
         </center>
      </div>
   );
}

文件名 – App.css

在CSS文件中，我们已经应用了样式，使我们可以在一列中看到所有的联系卡。此外，我们还用各种CSS设计了联系卡。

.list {
   display: flex;
   flex-direction: column;
   background-color: aqua;
   width: 20rem;
   border-radius: 10px;
}
.contact {
   width: 90%;
   display: flex;
   flex-direction: column;
   background-color: rgb(190, 187, 187);
   border-radius: 10px;
   margin: 5px auto;
   padding: 0;
}
.name {
   font-size: 1.2rem;
   font-weight: 600;
   padding: 2px 10px;
}
.number {
   font-weight: 400;
   padding: 2px 10px;
}
.time {
   padding: 2px 10px;
}

输出

如何在ReactJS中创建电话号码和联系人列表？

例子

文件名 – App.js

在下面的例子中，我们创建了contactData数组列表，其中包含有名字和号码属性的对象。在该组件中，我们使用map()方法来显示卡片中的每个联系人。

import React from "react";
import { useState } from "react";
import "./App.css";
export default function App() {
   const contactData = [ 
      {
         name: "Shubham",
         number: "+918143233476"
      },
      {
         name: "name 1",
         number: "+919732433232"
      },
      {
         name: "name 2",
         number: "+918987633476"
      },
      {
         name: "name 3",
         number: "+918908764231"
      },
      {
         name: "name 4",
         number: "+914323433476"
      },
      {
         name: "name 5",
         number: "+917856233476"
      },
      {
         name: "name 6",
         number: "+918143290668"
      },
   ];
   return (
      <div>
         <center>
            <h2> Contact List</h2>
            <div className="list">
               {contactData.map((contact) => {
                  return (
                     <div className="contact">
                        <div className="name"> {contact.name} </div>
                        <div className="number"> {contact.number} </div>
                     </div>
                  );
               })}
            </div>
         </center>
      </div>
   );
}

文件名 – App.css

在CSS文件中，我们以这样的方式应用了CSS，使我们能够在可滚动的容器中显示联系人列表。此外，我们还设计了容器的滚动条。

.list {
   display: flex;
   flex-direction: column;
   max-height: 20rem;
   overflow-y: auto;
   background-color: rgb(28, 29, 29);
   width: 20rem;
   border-radius: 10px;
}
.list::-webkit-scrollbar {
   width: 0.5em;
}
.list::-webkit-scrollbar-thumb {
   background-color: grey;
   border-radius: 4px;
   outline: none;
}
.contact {
   width: 90%;
   display: flex;
   flex-direction: column;
   background-color: rgb(241, 239, 239);
   border-radius: 10px;
   margin: 5px auto;
   padding: 0;
}
.name {
   font-size: 1.2rem;
   padding: 2px 10px;
}
.number {
   font-weight: 600;
   padding: 2px 10px;
}