Conditional Rendering trong React: Render Có Điều Kiện

Trong React, Conditional Rendering (Render có điều kiện) cho phép bạn hiển thị hoặc ẩn các phần của giao diện dựa trên các điều kiện cụ thể. Điều này rất hữu ích khi bạn muốn thay đổi nội dung giao diện hoặc hành vi của ứng dụng dựa trên trạng thái hoặc các yếu tố khác. React cung cấp một số cách để thực hiện điều này, và trong bài viết này, chúng ta sẽ tìm hiểu về các phương pháp render có điều kiện phổ biến trong React.

1. Cách Thực Hiện Render Có Điều Kiện

Render có điều kiện trong React có thể được thực hiện thông qua các cấu trúc điều kiện cơ bản như if, ternary operator, hoặc && (logical AND). Tùy thuộc vào tình huống và nhu cầu, bạn có thể chọn phương pháp phù hợp.

2. Sử Dụng If-Else trong JSX

Trong React, bạn không thể sử dụng trực tiếp câu lệnh if-else trong JSX. Tuy nhiên, bạn có thể thực hiện điều này trước khi return JSX, ví dụ như trong hàm render hoặc function component.

Ví Dụ: Render với If-Else

import React, { useState } from 'react';
	
const Greeting = () => {
	  const [isLoggedIn, setIsLoggedIn] = useState(false);
	
	  let greetingMessage;
	  if (isLoggedIn) {
	    greetingMessage = <h1>Chào mừng trở lại!</h1>;
	  } else {
	    greetingMessage = <h1>Xin chào! Hãy đăng nhập để tiếp tục.</h1>;
	  }
	
	  return (
	    <div>
	      {greetingMessage}
	      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
	        {isLoggedIn ? 'Đăng xuất' : 'Đăng nhập'}
	      </button>
	    </div>
	  );
};
	
export default Greeting;

Trong ví dụ này:

• Chúng ta sử dụng câu lệnh if-else bên ngoài JSX để quyết định thông báo chào mừng nào sẽ được hiển thị dựa trên giá trị của isLoggedIn.
• greetingMessage sẽ chứa JSX phù hợp dựa trên trạng thái isLoggedIn, và sau đó được render trong phần thân của component.

3. Sử Dụng Ternary Operator (Toán tử Ba Ngôi)

Toán tử ba ngôi (ternary operator) là một cách ngắn gọn để thực hiện render có điều kiện trong JSX. Cấu trúc của toán tử ba ngôi là:

condition ? expressionIfTrue : expressionIfFalse

Ví Dụ: Render với Toán Tử Ba Ngôi

import React, { useState } from 'react';
	
const Greeting = () => {
	  const [isLoggedIn, setIsLoggedIn] = useState(false);
	
	  return (
	    <div>
	      {isLoggedIn ? <h1>Chào mừng trở lại!</h1> : <h1>Xin chào! Hãy đăng nhập để tiếp tục.</h1>}
	      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
	        {isLoggedIn ? 'Đăng xuất' : 'Đăng nhập'}
	      </button>
	    </div>
	  );
};
	
export default Greeting;

Trong ví dụ trên:

• isLoggedIn ? <h1>Chào mừng trở lại!</h1> : <h1>Xin chào! Hãy đăng nhập để tiếp tục.</h1> sử dụng toán tử ba ngôi để lựa chọn nội dung chào mừng.
• Toán tử ba ngôi giúp mã ngắn gọn và dễ đọc, đặc biệt khi bạn chỉ cần làm một phép kiểm tra đơn giản.

4. Sử Dụng Logical AND (&&) để Render Có Điều Kiện

Cấu trúc logical AND (&&) rất hữu ích khi bạn chỉ muốn render một phần tử nếu điều kiện là đúng. Nếu điều kiện là true, phần tử sẽ được render; nếu không, React sẽ bỏ qua.

Ví Dụ: Render với Logical AND (&&)

import React, { useState } from 'react';
	
const Notification = () => {
	  const [isNewNotification, setIsNewNotification] = useState(false);
	
	  return (
	    <div>
	      {isNewNotification && <p>Bạn có thông báo mới!</p>}
	      <button onClick={() => setIsNewNotification(!isNewNotification)}>
	        {isNewNotification ? 'Đánh dấu đã xem' : 'Có thông báo mới'}
	      </button>
	    </div>
	  );
};
	
export default Notification;

Trong ví dụ này:

• {isNewNotification && <p>Bạn có thông báo mới!</p>} chỉ hiển thị thông báo khi isNewNotification là true.
• Nếu isNewNotification là false, React sẽ bỏ qua phần tử <p>...</p> mà không render gì.

5. Sử Dụng Switch-Case trong JSX

Nếu bạn cần kiểm tra nhiều điều kiện khác nhau, bạn có thể sử dụng câu lệnh switch-case trong hàm render hoặc function component trước khi return JSX. switch-case rất hữu ích khi có nhiều giá trị của một biến mà bạn cần kiểm tra.

Ví Dụ: Render với Switch-Case

import React, { useState } from 'react';
	
const StatusMessage = () => {
	  const [status, setStatus] = useState('loading');
	
	  let message;
	  switch (status) {
	    case 'loading':
	      message = <h1>Đang tải...</h1>;
	      break;
	    case 'success':
	      message = <h1>Tải thành công!</h1>;
	      break;
	    case 'error':
	      message = <h1>Đã có lỗi xảy ra!</h1>;
	      break;
	    default:
	      message = <h1>Trạng thái không xác định</h1>;
	  }
	
	  return (
	    <div>
	      {message}
	      <button onClick={() => setStatus('success')}>Tải thành công</button>
	      <button onClick={() => setStatus('error')}>Tải lỗi</button>
	      <button onClick={() => setStatus('loading')}>Tải lại</button>
	    </div>
	  );
};
	
export default StatusMessage;

Trong ví dụ này:

• Câu lệnh switch-case giúp bạn kiểm tra và render thông báo tương ứng dựa trên giá trị của status.
• Các nút bấm thay đổi giá trị của status, và nội dung được render lại dựa trên trạng thái đó.

6. Render Các Component Dựa Trên Điều Kiện

Một cách phổ biến để render có điều kiện trong React là hiển thị các component khác nhau tùy thuộc vào các điều kiện. Điều này thường thấy trong các ứng dụng khi người dùng đăng nhập, lựa chọn quyền truy cập, hoặc thay đổi chế độ hiển thị.

Ví Dụ: Render Các Component Khác Nhau

import React, { useState } from 'react';
	
const UserProfile = () => <h1>Chào mừng, người dùng!</h1>;
const GuestProfile = () => <h1>Chào mừng, khách!</h1>;
	
const UserStatus = () => {
	  const [isLoggedIn, setIsLoggedIn] = useState(false);
	
	  return (
	    <div>
	      {isLoggedIn ? <UserProfile /> : <GuestProfile />}
	      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
	        {isLoggedIn ? 'Đăng xuất' : 'Đăng nhập'}
	      </button>
	    </div>
	  );
};
	
export default UserStatus;

Trong ví dụ này:

• isLoggedIn ? <UserProfile /> : <GuestProfile /> quyết định hiển thị component UserProfile hoặc GuestProfile tùy thuộc vào giá trị của isLoggedIn.

7. Kết Luận

Render có điều kiện trong React giúp bạn tạo ra các giao diện linh hoạt và động, cho phép ứng dụng của bạn thay đổi theo điều kiện cụ thể. Bạn có thể sử dụng các cách như if-else, toán tử ba ngôi, logical AND, hoặc switch-case để kiểm tra và render nội dung phù hợp. Bằng cách này, bạn có thể kiểm soát cách ứng dụng phản hồi với các tình huống khác nhau và mang đến trải nghiệm người dùng tốt hơn.