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>
  );
}

Ví dụ với class component:

class MyComponent extends React.Component {
  render() {
    if (!this.props.shouldShow) {
      return null;
    }

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

Trong cả hai trường hợp, component sẽ không render gì cả nếu shouldShow là false.

3. Sử dụng Higher-Order Components (HOC)

Bạn cũng có thể sử dụng một Higher-Order Component để kiểm soát việc hiển thị của một component. HOC là một hàm nhận vào một component và trả về một component mới với một số logic bổ sung - trong trường hợp này, logic để quyết định xem component gốc có được hiển thị hay không.

function withConditionalRendering(WrappedComponent) {
  return function({ shouldShow, ...props }) {
    if (!shouldShow) {
      return null;
    }

    return <WrappedComponent {...props} />;
  };
}

Sử dụng HOC:

const MyComponentWithConditionalRendering = withConditionalRendering(MyComponent);

// Trong JSX của bạn
<MyComponentWithConditionalRendering shouldShow={true} />

Sử dụng các phương pháp trên, bạn có thể dễ dàng kiểm soát việc hiển thị của các component trong ứng dụng React của mình.