資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 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。在類名為“contact”的 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;
}
輸出
示例
檔名 – App.js
在下面的示例中，我們建立了包含具有 name 和 number 屬性的物件的 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;
}
輸出
在上面的輸出中，使用者可以看到十個聯絡人。我們為每個聯絡人建立了一個單獨的卡片。此外，使用者可以滾動容器以檢視所有聯絡人。
我們已經看到了在 ReactJS 中建立聯絡人列表的兩個不同示例。在第一個示例中，我們使用 HTML 和 CSS 與 ReactJs 來建立聯絡人列表。我們優化了第一個示例，並在第二個示例中使用了 map() 方法來顯示所有聯絡人。建議按照第二個示例在即時應用程式中實現聯絡人列表。
781 次檢視
