Làm thế nào để thêm các attributes vào các React components một cách có điều kiện?

Trong React, việc thêm các attributes vào components một cách có điều kiện có thể được thực hiện thông qua việc sử dụng JavaScript expressions trong JSX. Dưới đây là một số cách phổ biến để thực hiện điều này:

Sử dụng Toán Tử Ba Ngôi

Bạn có thể sử dụng toán tử ba ngôi (condition ? true : false) để thêm attributes một cách có điều kiện.

function MyComponent({ isActive }) {
  return (
    <div className={isActive ? 'active' : ''}>Hello, World!</div>
  );
}

Trong ví dụ trên, class active sẽ chỉ được thêm vào div nếu isActive là true.

Sử dụng Short-circuit Evaluation

JavaScript cho phép sử dụng short-circuit evaluation để thực hiện các phép toán logic mà không cần đến toán tử ba ngôi. Điều này có thể được sử dụng để thêm attributes.

function MyComponent({ isActive }) {
  return (
    <div className={isActive && 'active'}>Hello, World!</div>
  );
}

Trong ví dụ trên, nếu isActive là true, className sẽ là active. Nếu isActive là false, JavaScript sẽ trả về false và React sẽ bỏ qua attribute này.

Sử dụng Spread Operator để Thêm Props Có Điều Kiệ...