M

MLOG

Tiếng Việt

Mở khóa các mẫu UI nâng cao với React Portals. Học cách kết xuất modals, tooltips, và thông báo bên ngoài cây component mà vẫn bảo toàn hệ thống sự kiện và context của React. Hướng dẫn thiết yếu cho lập trình viên toàn cầu.

Làm Chủ React Portals: Kết Xuất Component Vượt Ngoài Cấu Trúc Phân Cấp DOM

Trong bối cảnh rộng lớn của phát triển web hiện đại, React đã trao quyền cho vô số lập trình viên trên toàn thế giới để xây dựng các giao diện người dùng động và có tính tương tác cao. Kiến trúc dựa trên component của nó giúp đơn giản hóa các cấu trúc UI phức tạp, thúc đẩy khả năng tái sử dụng và bảo trì. Tuy nhiên, ngay cả với thiết kế thanh lịch của React, các lập trình viên đôi khi gặp phải các tình huống mà phương pháp kết xuất component tiêu chuẩn – nơi các component kết xuất đầu ra của chúng như là các phần tử con bên trong phần tử DOM của cha – lại bộc lộ những hạn chế đáng kể.

Hãy xem xét một hộp thoại modal cần xuất hiện phía trên tất cả các nội dung khác, một banner thông báo nổi trên toàn cục, hoặc một menu ngữ cảnh phải thoát ra khỏi ranh giới của một container cha bị tràn. Trong những tình huống này, phương pháp thông thường là kết xuất component trực tiếp trong cấu trúc phân cấp DOM của cha có thể dẫn đến những thách thức về styling (như xung đột z-index), các vấn đề về layout, và sự phức tạp trong việc lan truyền sự kiện. Đây chính là lúc React Portals xuất hiện như một công cụ mạnh mẽ và không thể thiếu trong kho vũ khí của một lập trình viên React.

Hướng dẫn toàn diện này đi sâu vào mô hình React Portal, khám phá các khái niệm cơ bản, ứng dụng thực tế, những lưu ý nâng cao và các thực hành tốt nhất. Dù bạn là một lập trình viên React dày dạn kinh nghiệm hay chỉ mới bắt đầu hành trình của mình, việc hiểu về portals sẽ mở ra những khả năng mới để xây dựng trải nghiệm người dùng thực sự mạnh mẽ và có thể truy cập toàn cầu.

Hiểu Rõ Thách Thức Cốt Lõi: Những Hạn Chế của Cấu Trúc Phân Cấp DOM

Theo mặc định, các component React kết xuất đầu ra của chúng vào nút DOM của component cha. Điều này tạo ra một sự ánh xạ trực tiếp giữa cây component React và cây DOM của trình duyệt. Mặc dù mối quan hệ này trực quan và nhìn chung có lợi, nó có thể trở thành một trở ngại khi việc biểu diễn trực quan của một component cần thoát ra khỏi các ràng buộc của cha nó.

Các Kịch Bản Phổ Biến và Những Vấn Đề Gặp Phải:

Trong mỗi kịch bản này, việc cố gắng đạt được kết quả hình ảnh mong muốn chỉ bằng cách sử dụng kết xuất React tiêu chuẩn thường dẫn đến CSS phức tạp, các giá trị `z-index` quá mức, hoặc logic định vị phức tạp khó bảo trì và mở rộng. Đây là nơi React Portals cung cấp một giải pháp sạch sẽ, đúng chuẩn.

React Portal Chính Xác Là Gì?

React Portal cung cấp một cách thức hàng đầu để kết xuất các thành phần con vào một nút DOM tồn tại bên ngoài cấu trúc phân cấp DOM của component cha. Mặc dù được kết xuất vào một phần tử DOM vật lý khác, nội dung của portal vẫn hoạt động như thể nó là một phần tử con trực tiếp trong cây component React. Điều này có nghĩa là nó duy trì cùng một context React (ví dụ: các giá trị Context API) và tham gia vào hệ thống nổi bọt sự kiện (event bubbling) của React.

Cốt lõi của React Portals nằm ở phương thức `ReactDOM.createPortal()`. Cú pháp của nó rất đơn giản:

ReactDOM.createPortal(child, container)

Khi bạn sử dụng `ReactDOM.createPortal()`, React tạo ra một cây DOM ảo mới dưới nút DOM `container` được chỉ định. Tuy nhiên, cây con mới này vẫn được kết nối logic với component đã tạo ra portal. "Kết nối logic" này là chìa khóa để hiểu tại sao việc nổi bọt sự kiện và context hoạt động như mong đợi.

Thiết Lập React Portal Đầu Tiên Của Bạn: Một Ví Dụ Modal Đơn Giản

Hãy cùng xem qua một trường hợp sử dụng phổ biến: tạo một hộp thoại modal. Để triển khai một portal, trước tiên bạn cần một phần tử DOM đích trong tệp `index.html` của mình (hoặc bất cứ đâu là tệp HTML gốc của ứng dụng) nơi nội dung portal sẽ được kết xuất.

Bước 1: Chuẩn Bị Node DOM Đích

Mở tệp `public/index.html` của bạn (hoặc tương đương) và thêm một phần tử `div` mới. Một thực hành phổ biến là thêm nó ngay trước thẻ đóng `body`, bên ngoài gốc ứng dụng React chính của bạn.


<body>
  <!-- Gốc ứng dụng React chính của bạn -->
  <div id="root"></div>

  <!-- Đây là nơi nội dung portal của chúng ta sẽ được kết xuất -->
  <div id="modal-root"></div>
</body>

Bước 2: Tạo Component Portal

Bây giờ, hãy tạo một component modal đơn giản sử dụng portal.


// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // Gắn div vào modal root khi component được mount
    modalRoot.appendChild(el.current);

    // Dọn dẹp: xóa div khi component được unmount
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Mảng phụ thuộc rỗng có nghĩa là hàm này chạy một lần khi mount và một lần khi unmount

  if (!isOpen) {
    return null; // Không kết xuất gì nếu modal không mở
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // Đảm bảo nó nằm trên cùng
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Đóng Modal</button>
      </div>
    </div>,
    el.current // Kết xuất nội dung modal vào div chúng ta đã tạo, nằm bên trong modalRoot
  );
};

export default Modal;

Trong ví dụ này, chúng ta tạo một phần tử `div` mới cho mỗi phiên bản modal (`el.current`) và gắn nó vào `modal-root`. Điều này cho phép chúng ta quản lý nhiều modals nếu cần mà không làm chúng ảnh hưởng đến vòng đời hoặc nội dung của nhau. Nội dung modal thực tế (lớp phủ và hộp màu trắng) sau đó được kết xuất vào `el.current` này bằng cách sử dụng `ReactDOM.createPortal`.

Bước 3: Sử Dụng Component Modal


// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Giả sử Modal.js nằm trong cùng thư mục

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Ví dụ về React Portal</h1>
      <p>Nội dung này là một phần của cây ứng dụng chính.</p>
      <button onClick={handleOpenModal}>Mở Modal Toàn Cục</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Lời chào từ Portal!</h3>
        <p>Nội dung modal này được kết xuất bên ngoài div 'root', nhưng vẫn được quản lý bởi React.</p>
      </Modal>
    </div>
  );
}

export default App;

Mặc dù component `Modal` được kết xuất bên trong component `App` (bản thân nó nằm trong div `root`), đầu ra DOM thực tế của nó lại xuất hiện bên trong div `modal-root`. Điều này đảm bảo modal phủ lên mọi thứ mà không gặp vấn đề về `z-index` hoặc `overflow`, trong khi vẫn được hưởng lợi từ việc quản lý trạng thái và vòng đời component của React.

Các Trường Hợp Sử Dụng Chính và Ứng Dụng Nâng Cao của React Portals

Mặc dù modals là một ví dụ tinh túy, sự hữu ích của React Portals còn vượt xa các pop-up đơn giản. Hãy khám phá thêm các kịch bản nâng cao hơn nơi portals cung cấp các giải pháp thanh lịch.

1. Hệ Thống Modal và Dialog Vững Chắc

Như đã thấy, portals đơn giản hóa việc triển khai modal. Các ưu điểm chính bao gồm:

2. Tooltips, Popovers, và Dropdowns Động

Tương tự như modals, các phần tử này thường cần xuất hiện liền kề với một phần tử kích hoạt nhưng cũng phải thoát ra khỏi các layout cha bị giới hạn.

3. Thông Báo Toàn Cục và Tin Nhắn Toast

Các ứng dụng thường yêu cầu một hệ thống để hiển thị các thông báo không chặn, tạm thời (ví dụ: "Đã thêm sản phẩm vào giỏ hàng!", "Mất kết nối mạng").

4. Menu Ngữ Cảnh Tùy Chỉnh

Khi người dùng nhấp chuột phải vào một phần tử, một menu ngữ cảnh thường xuất hiện. Menu này cần được định vị chính xác tại vị trí con trỏ và phủ lên tất cả các nội dung khác. Portals là lý tưởng ở đây:

5. Tích Hợp với Thư Viện Bên Thứ Ba hoặc Các Phần Tử DOM không phải của React

Hãy tưởng tượng bạn có một ứng dụng hiện có mà một phần của UI được quản lý bởi một thư viện JavaScript cũ, hoặc có thể là một giải pháp bản đồ tùy chỉnh sử dụng các nút DOM của riêng nó. Nếu bạn muốn kết xuất một component React nhỏ, tương tác bên trong một nút DOM bên ngoài như vậy, `ReactDOM.createPortal` chính là cầu nối của bạn.

Những Lưu Ý Nâng Cao Khi Sử Dụng React Portals

Mặc dù portals giải quyết các vấn đề kết xuất phức tạp, điều quan trọng là phải hiểu cách chúng tương tác với các tính năng khác của React và DOM để tận dụng chúng một cách hiệu quả và tránh các cạm bẫy phổ biến.

1. Nổi Bọt Sự Kiện (Event Bubbling): Một Sự Khác Biệt Quan Trọng

Một trong những khía cạnh mạnh mẽ và thường bị hiểu lầm nhất của React Portals là hành vi của chúng đối với việc nổi bọt sự kiện. Mặc dù được kết xuất vào một nút DOM hoàn toàn khác, các sự kiện được kích hoạt từ các phần tử bên trong một portal vẫn sẽ nổi bọt lên qua cây component React như thể không có portal nào tồn tại. Điều này là do hệ thống sự kiện của React là tổng hợp (synthetic) và hoạt động độc lập với việc nổi bọt sự kiện DOM gốc trong hầu hết các trường hợp.

2. Context API và Portals

Context API là cơ chế của React để chia sẻ các giá trị (như chủ đề, trạng thái xác thực người dùng) trên toàn cây component mà không cần truyền props qua nhiều cấp (prop-drilling). May mắn thay, Context hoạt động liền mạch với portals.

3. Khả Năng Truy Cập (A11y) với Portals

Xây dựng giao diện người dùng có khả năng truy cập là điều tối quan trọng đối với khán giả toàn cầu, và portals giới thiệu các cân nhắc A11y cụ thể, đặc biệt là đối với modals và dialogs.

4. Thách Thức và Giải Pháp về Styling

Mặc dù portals giải quyết các vấn đề về cấu trúc phân cấp DOM, chúng không tự động giải quyết tất cả các phức tạp về styling.

5. Những Lưu Ý về Kết Xuất Phía Máy Chủ (SSR)

Nếu ứng dụng của bạn sử dụng Kết Xuất Phía Máy Chủ (SSR), bạn cần lưu ý cách portals hoạt động.

6. Kiểm Thử Các Component Sử Dụng Portals

Kiểm thử các component kết xuất thông qua portals có thể hơi khác một chút nhưng được hỗ trợ tốt bởi các thư viện kiểm thử phổ biến như React Testing Library.

Những Cạm Bẫy Phổ Biến và Các Thực Hành Tốt Nhất cho React Portals

Để đảm bảo việc sử dụng React Portals của bạn hiệu quả, có thể bảo trì và hoạt động tốt, hãy xem xét các thực hành tốt nhất này và tránh các sai lầm phổ biến:

1. Đừng Lạm Dụng Portals

Portals rất mạnh mẽ, nhưng chúng nên được sử dụng một cách thận trọng. Nếu đầu ra trực quan của một component có thể đạt được mà không phá vỡ cấu trúc phân cấp DOM (ví dụ: sử dụng định vị tương đối hoặc tuyệt đối trong một cha không bị tràn), thì hãy làm như vậy. Việc phụ thuộc quá nhiều vào portals đôi khi có thể làm phức tạp việc gỡ lỗi cấu trúc DOM nếu không được quản lý cẩn thận.

2. Đảm Bảo Dọn Dẹp Đúng Cách (Khi Unmount)

Nếu bạn tự động tạo một nút DOM cho portal của mình (như trong ví dụ `Modal` của chúng ta với `el.current`), hãy đảm bảo bạn dọn dẹp nó khi component sử dụng portal được unmount. Hàm dọn dẹp của `useEffect` là hoàn hảo cho việc này, ngăn chặn rò rỉ bộ nhớ và làm lộn xộn DOM với các phần tử mồ côi.


useEffect(() => {
  // ... gắn el.current
  return () => {
    // ... xóa el.current;
  };
}, []);

Nếu bạn luôn kết xuất vào một nút DOM cố định, đã có sẵn (như một `modal-root` duy nhất), việc dọn dẹp *chính nút đó* là không cần thiết, nhưng việc đảm bảo *nội dung portal* được unmount chính xác khi component cha unmount vẫn được React xử lý tự động.

3. Những Lưu Ý về Hiệu Năng

Đối với hầu hết các trường hợp sử dụng (modals, tooltips), portals có tác động hiệu suất không đáng kể. Tuy nhiên, nếu bạn đang kết xuất một component cực kỳ lớn hoặc cập nhật thường xuyên thông qua một portal, hãy xem xét các tối ưu hóa hiệu suất React thông thường (ví dụ: `React.memo`, `useCallback`, `useMemo`) như bạn vẫn làm với bất kỳ component phức tạp nào khác.

4. Luôn Ưu Tiên Khả Năng Truy Cập

Như đã nhấn mạnh, khả năng truy cập là rất quan trọng. Đảm bảo nội dung được kết xuất qua portal của bạn tuân thủ các hướng dẫn ARIA và cung cấp trải nghiệm mượt mà cho tất cả người dùng, đặc biệt là những người phụ thuộc vào điều hướng bằng bàn phím hoặc trình đọc màn hình.

5. Sử Dụng HTML Ngữ Nghĩa Bên Trong Portals

Mặc dù portal cho phép bạn kết xuất nội dung ở bất kỳ đâu về mặt trực quan, hãy nhớ sử dụng các phần tử HTML ngữ nghĩa bên trong các phần tử con của portal. Ví dụ, một hộp thoại nên sử dụng phần tử `

` (nếu được hỗ trợ và tạo kiểu), hoặc một `div` với `role="dialog"` và các thuộc tính ARIA phù hợp. Điều này hỗ trợ khả năng truy cập và SEO.

6. Bối Cảnh Hóa Logic Portal Của Bạn

Đối với các ứng dụng phức tạp, hãy xem xét việc đóng gói logic portal của bạn trong một component tái sử dụng hoặc một hook tùy chỉnh. Ví dụ, một hook `useModal` hoặc một component `PortalWrapper` chung có thể trừu tượng hóa lệnh gọi `ReactDOM.createPortal` và xử lý việc tạo/dọn dẹp nút DOM, làm cho mã ứng dụng của bạn sạch sẽ và module hóa hơn.


// Ví dụ về một PortalWrapper đơn giản
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // nếu phần tử với wrapperId không tồn tại, tạo và gắn nó vào body
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Xóa phần tử được tạo theo chương trình
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;

`PortalWrapper` này cho phép bạn chỉ cần bọc bất kỳ nội dung nào, và nó sẽ được kết xuất vào một nút DOM được tạo động (và được dọn dẹp) với ID được chỉ định, đơn giản hóa việc sử dụng trên toàn ứng dụng của bạn.

Kết Luận: Nâng Cao Năng Lực Phát Triển UI Toàn Cục với React Portals

React Portals là một tính năng thanh lịch và thiết yếu, trao quyền cho các lập trình viên để thoát khỏi những ràng buộc truyền thống của cấu trúc phân cấp DOM. Chúng cung cấp một cơ chế mạnh mẽ để xây dựng các phần tử UI phức tạp, tương tác như modals, tooltips, thông báo và menu ngữ cảnh, đảm bảo chúng hoạt động chính xác cả về mặt trực quan và chức năng.

Bằng cách hiểu cách portals duy trì cây component React logic, cho phép luồng sự kiện và context diễn ra liền mạch, các lập trình viên có thể tạo ra các giao diện người dùng thực sự tinh vi và có khả năng truy cập, phục vụ cho nhiều đối tượng người dùng toàn cầu. Dù bạn đang xây dựng một trang web đơn giản hay một ứng dụng doanh nghiệp phức tạp, việc làm chủ React Portals sẽ nâng cao đáng kể khả năng của bạn trong việc tạo ra những trải nghiệm người dùng linh hoạt, hiệu suất cao và thú vị. Hãy nắm bắt mô hình mạnh mẽ này và mở khóa cấp độ tiếp theo của phát triển React!