Câu hỏi

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?

Câu trả lời

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 isActivetrue.

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 isActivetrue, className sẽ là active. Nếu isActivefalse, 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ệ...

Bạn cần đăng nhập để xem
senior

senior

Gợi ý câu hỏi phỏng vấn

middle

Làm thế nào để bạn chặn callback của 1 event trong React?

middle

SyntheticEvent trong React là gì?

middle

Làm thế nào để tránh việc cần phải binding trong React?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào