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

Để 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:

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

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

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

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

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:

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

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

*...