Hiểu về createPortal trong ReactJS

React là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng, nổi tiếng với kiến trúc dựa trên thành phần linh hoạt và hiệu quả. Một trong những tính năng quan trọng mà React cung cấp là khả năng tạo ra các cổng (portals) bằng cách sử dụng hàm createPortal. Cổng cung cấp một cách để render các thành phần vào một nút DOM tồn tại bên ngoài hệ thống phân cấp của thành phần cha. Bài viết này khám phá khái niệm về các cổng trong React và hướng dẫn cách sử dụng hàm createPortal một cách hiệu quả.

Portal là gì?

Trong React, các thành phần thường được render trong hệ thống DOM của các thành phần cha của chúng. Tuy nhiên, có những trường hợp bạn có thể muốn render các thành phần con của mình tại một vị trí khác trong cây DOM, chẳng hạn như các hộp thoại modal, gợi ý hoặc popover. Đây là nơi cổng đóng vai trò.

Cổng cung cấp một cách để render các thành phần con vào một nút DOM khác nằm ngoài hệ thống DOM của thành phần cha, cho phép các nhà phát triển tạo ra các phần tử giao diện người dùng mà vượt qua các ràng buộc thông thường của cấu trúc DOM.

Giới thiệu về createPortal

Hàm createPortal là một tính năng được giới thiệu trong React 16 cho phép tạo ra các cổng. Nó nhận hai đối số: đối số đầu tiên là phần tử JSX hoặc thành phần mà bạn muốn render và đối số thứ hai là nút DOM mà bạn muốn render phần tử đó.

ReactDOM.createPortal(
  <child />,
  document.getElementById('portal-root')
);

Trong ví dụ trên, <child /> sẽ được render vào nút DOM với id là 'portal-root'.

Cách sử dụng createPortal

import { createPortal } from 'react-dom';

function Example {
 
 return createPortal(
    <div>
     <p>Portal content</p>
    </div>,
    document.getElementById('portal-root')
  );   

}

Trong ví dụ trên, nội dung của cổng sẽ được render vào nút DOM với id là 'portal-root', nằm bên ngoài cây DOM của thành phần Example.

Kết luận

Tính năng createPortal trong React cung cấp một cách tiện lợi và mạnh mẽ để tạo ra các cổng, cho phép render các thành phần vào các vị trí tùy ý trong cây DOM. Bằng cách sử dụng createPortal, bạn có thể tạo ra các thành phần giao diện phức tạp mà không bị ràng buộc bởi cấu trúc DOM của các thành phần cha.

Trong tổng thể, việc sử dụng createPortal phụ thuộc vào yêu cầu cụ thể của ứng dụng và cách bạn muốn tổ chức giao diện người dùng của mình. Nếu bạn đang cần tạo ra các thành phần giao diện đặc biệt mà không phù hợp với cấu trúc DOM hiện tại, hoặc muốn cải thiện tính bảo mật và hiệu suất của ứng dụng, thì createPortal có thể là lựa chọn phù hợp. Tuy nhiên, cần chú ý đến các vấn đề liên quan đến quản lý trạng thái và hiệu suất khi sử dụng tính năng này.

Hiểu về createPortal trong ReactJS