Cách tạo Thành phần thông báo tùy chỉnh trong React
Có một số gói của bên thứ ba có sẵn trong React có thể giúp bạn tạo thành phần thông báo. Tuy nhiên, nếu bạn chỉ muốn một thành phần thông báo đơn giản, bạn có thể muốn tạo thành phần thông báo của riêng mình để tránh thêm các thành phần phụ thuộc không cần thiết vào ứng dụng của mình.
Mục Lục
Thiết lập dự án
Bạn sẽ sử dụng Vite để thiết lập ứng dụng React. Vite là một công cụ xây dựng cho phép bạn nhanh chóng dàn dựng một dự án React.
Để bắt đầu, hãy sử dụng trình quản lý gói sợi để tạo dự án Vite mới bằng cách chạy lệnh bên dưới.
yarn create vite
Lệnh sẽ nhắc bạn nhập tên dự án. Nhập tên của dự án và nhấn Enter. Tiếp theo, nó sẽ nhắc bạn chọn một khung. Chọn phản ứng và nhấn Enter. Cuối cùng, nó sẽ yêu cầu bạn chọn một biến thể, hãy chọn JavaScript rồi nhấn Enter.
Dưới đây là các cấu hình mà hướng dẫn này sẽ sử dụng:
Sau khi Vite tạo dự án, hãy điều hướng đến thư mục dự án và mở nó bằng trình chỉnh sửa mã.
Sau đó, bạn có thể khởi động máy chủ phát triển bằng cách chạy lệnh sau.
yarn dev
Điều này sẽ mở ứng dụng React mới của bạn trong trình duyệt mặc định của bạn tại http://localhost:5173/.
Thiết kế thành phần thông báo
Để tạo thành phần thông báo linh hoạt, nó cần có khả năng xử lý các loại thông báo khác nhau với tiêu đề, mô tả và kiểu khác nhau. Ví dụ: nó cần hiển thị thông báo cảnh báo, thành công và lỗi.
Dưới đây là các biến thể khác nhau mà thành phần thông báo có thể hiển thị.
Bạn có thể đạt được điều này bằng cách chuyển các đạo cụ tới thành phần chỉ định loại thông báo sẽ hiển thị, tiêu đề và văn bản mô tả. Bằng cách sử dụng các đạo cụ này, bạn có thể tùy chỉnh thành phần và sử dụng lại nó trong toàn bộ ứng dụng của mình mà không tốn nhiều công sức. Nếu bạn cần xem lại props, đây là bài viết giải thích cách sử dụng props trong React.
Tạo thành phần thông báo
bên trong src thư mục, tạo một tập tin mới có tên Thông báo.jsx và thêm mã sau đây.
export default function Notification({type, title, description}) {
return (
<div>
{}
</div>
)
}
Mã này tạo ra một thành phần chức năng gọi là Thông báo với ba đạo cụ: kiểu, tiêu đềVà Sự miêu tả. Bạn sẽ sử dụng các đạo cụ này để tùy chỉnh phong cách và nội dung của thông báo.
Từ thiết kế, thành phần này có một vài biểu tượng, cụ thể là thông tin và biểu tượng chữ thập. Bạn có thể tải xuống các biểu tượng sử dụng miễn phí hoặc sử dụng một thành phần biểu tượng từ một gói chẳng hạn như biểu tượng phản ứng. Hướng dẫn này sẽ sử dụng biểu tượng phản ứng vì vậy hãy cài đặt nó bằng cách chạy lệnh bên dưới.
yarn add react-icons
Sau đó nhập các biểu tượng ở trên cùng của Thông báo thành phần.
import { RxCross2, RxInfoCircled } from "react-icons/rx"
Bây giờ, bạn có thể sửa đổi thành phần để sử dụng các biểu tượng, tiêu đề và các giá trị chống đỡ mô tả để tạo nội dung của thông báo.
export default function Notification({type, title, description}) {
return (
<div>
<div>
<RxInfoCircled/>
<div>
<div>{title}</div>
<div>{description}</div>
</div>
</div>
<RxCross2/>
</div>
)
}
Bước tiếp theo là tạo kiểu cho nó tùy thuộc vào loại được truyền vào.
Một cách tiếp cận bạn có thể thực hiện là xác định các lớp CSS cho từng loại thông báo mà bạn muốn hiển thị. Sau đó, bạn có thể áp dụng lớp thích hợp một cách có điều kiện dựa trên loại được truyền vào.
Để bắt đầu, hãy tạo một tệp mới có tên thông báo.css và nhập nó vào Thông báo.jsx bằng cách thêm đoạn mã sau vào đầu.
import "./notification.css"
Sau đó trong thông báo.css xác định các kiểu cơ sở cho thành phần thông báo:
.notification {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px;
}
.notification__left {
display: flex;
flex-direction: row;
padding: 0px;
gap: 8px;
margin-right: 24px;
}
.notification__content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
}
.notification__title {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-size: 14px;
}
.notification__description {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 12px;
padding: 0;
}
Sau đó, bạn có thể xác định kiểu cho các loại thông báo khác nhau bằng cách thêm đoạn mã sau vào tệp CSS.
.notification__success {
background: #f6fef9;
border: 1px solid #2f9461;
border-radius: 8px;
}.notification__error {
background: #fffbfa;
border: 1px solid #cd3636;
border-radius: 8px;
}
.notification__warning {
background: #fffcf5;
border: 1px solid #c8811a;
border-radius: 8px;
}
Đoạn mã trên tạo kiểu cho vùng chứa thông báo dựa trên loại được truyền vào.
Để tùy chỉnh tiêu đề, hãy sử dụng các kiểu sau.
.notification__title__success {
color: #2f9461;
}.notification__title__warning {
color: #c8811a;
}
.notification__title__error {
color: #cd3636;
}
Đối với văn bản mô tả tùy chỉnh, hãy sử dụng các kiểu này.
.notification__description__success {
color: #53b483;
}.notification__description__warning {
color: #e9a23b;
}
.notification__description__error {
color: #f34141;
}
Và đối với các biểu tượng, hãy sử dụng các lớp sau.
.notification_icon_error {
color: #cd3636;
}
.notification__icon__success {
color: #2f9461;
}.notification__icon__warning {
color: #c8811a;
}
Sau đó, trong Thông báo thành phần, bạn có thể áp dụng có điều kiện lớp thích hợp dựa trên kiểu chỗ dựa, như thế này:
export default function Notification({type, title, description}) {
return (
<div className={`notification notification__${type}`}>
<div className={`notification__left`}>
<RxInfoCircled className={`notification__icon__${type}`}/>
<div className="notification__content">
<div className={`notification__title notification__title__${type}`}>{title}</div>
<div className={`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
<RxCross2 className={`notification__icon__${type}`}/>
</div>
)
}
Trong thành phần này, bạn đang tự động thiết lập lớp tùy thuộc vào loại, chẳng hạn như thông báo__success hoặc thông báo__lỗi.
Để thấy điều này hoạt động, hãy nhập thành phần Thông báo trong Ứng dụng.jsx và sử dụng nó như sau:
import Notification from './Notification'function App() {
return (
<>
<Notification
type="success"
title="Task Completed"
description="Your task has been completed successfully."
/>
</>
)
}
export default App
Bây giờ, bạn có thể chuyển một loại khác cho Thông báo thành phần và hiển thị thông báo phù hợp khớp với thông báo.
Đây là điều cần thiết để có trải nghiệm người dùng tốt vì người dùng đã liên kết các màu sắc và kiểu dáng khác nhau với các tình huống khác nhau và điều quan trọng là phải sử dụng các liên kết đó một cách nhất quán. Ví dụ: sẽ rất khó hiểu nếu thông báo cho người dùng biết họ đã tải ảnh lên thành công trong hộp thông báo màu đỏ. Họ có thể nghĩ rằng tải lên không thành công, ngay cả khi tải lên thành công.
Thêm tính tương tác vào Thành phần thông báo
Bạn đã học cách sử dụng đạo cụ để tạo thành phần thông báo có thể tùy chỉnh. Để tiến xa hơn nữa, bạn có thể thêm hiệu ứng chuyển tiếp vào thành phần này để làm cho nó hấp dẫn hơn. Ví dụ: bạn có thể sử dụng hoạt ảnh CSS để trượt thành phần thông báo lên màn hình và trượt nó ra sau một khoảng thời gian nhất định đã trôi qua.