ReactJS - Điều Kiện渲染

Xin chào các bạnfuture React developers! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những tính năng mạnh mẽ nhất của React: điều kiện渲染. Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ hướng dẫn bạn từng bước qua khái niệm này, giống như tôi đã làm cho hàng trăm sinh viên trong những năm dạy học của mình. Nào, hãy cầm một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và cùng nhau bắt đầu hành trình thú vị này nhé!

Điều Kiện Render Là Gì?

Trước khi chúng ta nhảy vào các nội dung cụ thể của React, hãy nói về điều kiện render là gì. Hãy tưởng tượng bạn đang tạo một thẻ chúc mừng kỳ diệu. Tùy thuộc vào việc là ngày hay đêm, bạn muốn thẻ chúc mừng đó nói "Chào buổi sáng!" hoặc "Chào buổi tối!". Đó chính là điều kiện render trong một nutshell - hiển thị nội dung khác nhau dựa trên các điều kiện nhất định.

Trong React, điều kiện render hoạt động theo cách tương tự. Nó cho phép chúng ta tạo ra các giao diện người dùng động có thể thay đổi dựa trên các điều kiện hoặc trạng thái khác nhau trong ứng dụng của chúng ta.

Điều Kiện Render Trong React

Bây giờ, hãy xem cách chúng ta có thể thực hiện điều kiện render trong React. Chúng ta sẽ bắt đầu với các phương pháp đơn giản nhất và dần dần chuyển sang các kỹ thuật cao cấp hơn.

1. Sử dụng câu lệnh if/else

Cách đơn giản nhất để thực hiện điều kiện render là sử dụng các câu lệnh if/else truyền thống. Hãy xem một ví dụ:

function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign in.</h1>;
}
}

Trong ví dụ này, chúng ta có một component Greeting nhận một prop isLoggedIn. Tùy thuộc vào việc người dùng có đăng nhập hay không, nó sẽ trả về khác nhau JSX.

2. Sử dụng toán tử tam phân

Trong khi các câu lệnh if/else hoạt động tốt, chúng có thể làm cho mã của chúng ta trở nên冗长. Đến với toán tử tam phân - một cách viết điều kiện ngắn gọn hơn:

function Greeting({ isLoggedIn }) {
return (
<h1>
{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
</h1>
);
}

Điều này làm exactly the same thing as our previous example, but in a much more compact form. It's like the Swiss Army knife of conditional rendering!

3. Toán tử && logic

Đôi khi, bạn chỉ muốn render một điều gì đó nếu một điều kiện là true, và không render gì nếu nó là false. Trong những trường hợp như vậy, toán tử && logic rất hữu ích:

function Notification({ hasUnreadMessages }) {
return (
<div>
{hasUnreadMessages &&
<p>You have new messages!</p>
}
</div>
);
}

Trong ví dụ này, phần tử <p> sẽ chỉ được render nếu hasUnreadMessages là true. Nếu nó là false, không có gì sẽ được render ở vị trí đó.

4. Câu lệnh switch

Khi bạn có nhiều điều kiện để kiểm tra, câu lệnh switch có thể là một cách sạch sẽ để xử lý điều kiện render:

function WeatherForecast({ weather }) {
switch(weather) {
case 'sunny':
return <p>It's a beautiful day!</p>;
case 'rainy':
return <p>Don't forget your umbrella!</p>;
case 'snowy':
return <p>Bundle up, it's cold outside!</p>;
default:
return <p>Weather forecast unavailable.</p>;
}
}

Phương pháp này đặc biệt hữu ích khi bạn có nhiều trường hợp cụ thể để xử lý.

5. Điều Kiện Render Component

Đôi khi, bạn có thể muốn render toàn bộ các component một cách điều kiện. Dưới đây là cách bạn có thể làm điều đó:

function Dashboard({ isAdmin }) {
return (
<div>
<h1>Welcome to your Dashboard</h1>
{isAdmin && <AdminPanel />}
<UserPanel />
</div>
);
}

Trong ví dụ này, component AdminPanel chỉ được render nếu isAdmin là true, trong khi UserPanel luôn được render.

Kỹ Thuật Cao Cấp

Bây giờ chúng ta đã bao gồm các kỹ thuật cơ bản, hãy xem xét một số kỹ thuật cao cấp hơn cho điều kiện render.

6. Sử dụng đối tượng cho Điều Kiện Render

Đôi khi, bạn có thể thấy mình có rất nhiều điều kiện. Trong những trường hợp như vậy, sử dụng một đối tượng có thể làm cho mã của bạn dễ bảo trì hơn:

const PAGES = {
home: <HomePage />,
about: <AboutPage />,
contact: <ContactPage />,
};

function App({ currentPage }) {
return (
<div>
{PAGES[currentPage] || <NotFoundPage />}
</div>
);
}

Phương pháp này đặc biệt hữu ích khi bạn có nhiều trang hoặc component khác nhau để render dựa trên một điều kiện.

7. Điều Kiện Render với HOCs

Higher-Order Components (HOCs) cũng có thể được sử dụng cho điều kiện render. Dưới đây là một ví dụ đơn giản:

function withAuth(Component) {
return function AuthenticatedComponent(props) {
const isAuthenticated = checkAuthStatus(); // Implement this function
if (isAuthenticated) {
return <Component {...props} />;
} else {
return <LoginPage />;
}
}
}

const ProtectedPage = withAuth(SecretPage);

HOC này thêm logic xác thực vào bất kỳ component nào nó bao bọc, chỉ render component nếu người dùng đã xác thực.

Kết Luận

Điều kiện render là một công cụ mạnh mẽ trong bộ công cụ React của bạn. Nó cho phép bạn tạo ra các giao diện người dùng động có thể thay đổi dựa trên dữ liệu và tương tác người dùng thay đổi. Như với bất kỳ khái niệm lập trình nào, chìa khóa để thành thạo điều kiện render là thực hành. Hãy thử thực hiện các kỹ thuật này trong các dự án của riêng bạn, và sớm bạn sẽ render điều kiện như một chuyên gia!

Nhớ rằng, không có một cách "đúng" duy nhất để thực hiện điều kiện render. Phương pháp tốt nhất phụ thuộc vào tình huống cụ thể và sở thích cá nhân (hoặc của nhóm). Vậy hãy thử nghiệm, vui chơi, và chúc bạn may mắn với lập trình!

Phương pháp	Mô tả	Trường hợp sử dụng
if/else statements	Logic điều kiện truyền thống	Điều kiện đơn giản với nhiều dòng mã
Ternary operator	Biểu thức điều kiện ngắn gọn	Điều kiện đơn giản với biểu thức ngắn
Logical && operator	Render hoặc không dựa trên điều kiện	Khi bạn chỉ cần render điều gì đó nếu true
Switch statement	Nhiều điều kiện cụ thể	Khi bạn có nhiều điều kiện cụ thể để kiểm tra
Điều kiện render component	Render component toàn bộ một cách điều kiện	Khi các loại người dùng khác nhau cần giao diện khác nhau
Object-based rendering	Sử dụng đối tượng để ánh xạ điều kiện đến component	Khi bạn có nhiều trang hoặc component khác nhau để render
HOCs for conditional rendering	Bao bọc component với logic điều kiện	Khi bạn muốn tái sử dụng logic điều kiện qua các component

Credits: Image by storyset