Portal trong React là gì?

Portal trong ReactJS là một tính năng cho phép bạn render các component vào một phần tử DOM nào đó nằm ngoài phạm vi DOM của component cha. Điều này rất hữu ích khi bạn cần render một component mà không muốn bị giới hạn bởi CSS hoặc vị trí DOM của component cha, ví dụ như các hộp thoại (modals), tooltips hoặc các thông báo toàn cục.

Cách Sử Dụng Portal

Để sử dụng portal, bạn sẽ sử dụng hàm ReactDOM.createPortal() từ thư viện ReactDOM. Hàm này nhận vào hai đối số:

1. React Element: Đây là component hoặc JSX mà bạn muốn render thông qua portal.
2. Container DOM Node: Đây là phần tử DOM mà bạn muốn component được render vào.

Ví dụ:

import React from 'react';
import ReactDOM from 'react-dom';

class MyModal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      // Bất kỳ JSX nào bạn muốn render
      <div className='modal'>
        {/* Nội dung của modal */}
      </div>,
      // Nơi bạn muốn modal được render trong DOM
      d...