Câu hỏi phỏng vấn React.js
Câu hỏi

Làm cách nào bạn ngăn một component hiển thị trong React?

Câu trả lời

Để ngăn một component hiển thị trong React, bạn có thể sử dụng một số cách sau:

1. Sử dụng Điều Kiện Trong JSX

Bạn có thể sử dụng một biểu thức điều kiện trong JSX để quyết định xem một component có được render hay không. Điều này thường được thực hiện bằng cách sử dụng toán tử ba ngôi hoặc các cấu trúc điều kiện khác như &&.

Ví dụ sử dụng toán tử ba ngôi:

jsx Copy
function MyComponent({ shouldShow }) {
  return (
    <div>
      {shouldShow ? <ComponentToShow /> : null}
    </div>
  );
}

Ví dụ sử dụng &&:

jsx Copy
function MyComponent({ shouldShow }) {
  return (
    <div>
      {shouldShow && <ComponentToShow />}
    </div>
  );
}

Trong cả hai ví dụ trên, ComponentToShow chỉ được render nếu shouldShowtrue.

2. Trả về null từ Component

Một component trong React có thể ngăn chính nó hiển thị bằng cách trả về null từ phương thức render (trong class component) hoặc từ chính bản thân nó (trong functional component).

Ví dụ với functional component:

jsx Copy
function MyComponent({ shouldShow }) {
  if (!shouldShow) {
    return null;
  }

  return (
    <div>
      {/* Nội dung của component */}
    </div>
  );
}

*...

middle

middle

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

middle

Làm thế nào để truyền một parameter vào một event handler hoặc callback?

senior

Làm thế nào để truy cập vào nút DOM trong một React component?

junior

React hook là gì?

Bình luận

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

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