Rate this post

Phiên bản React 16.0 đã giới thiệu các Portals React vào tháng 9 năm 2017. Portals React cung cấp cách hiển thị một phần tử bên ngoài hệ thống phân cấp thành phần của nó, tức là trong một thành phần riêng biệt.

Trước phiên bản React 16.0, rất khó để hiển thị thành phần con bên ngoài hệ thống phân cấp thành phần mẹ của nó. Nếu chúng ta làm điều này, nó sẽ phá vỡ quy ước nơi một thành phần cần hiển thị như một phần tử mới và tuân theo phân cấp cha-con. Trong React, thành phần mẹ luôn muốn đi đến nơi mà thành phần con của nó sẽ đi đến. Đó là lý do tại sao khái niệm Portals thông tin React ra đời.

Tóm tắt nội dung

Giới thiệu về Portals trong React

Portals là một tính năng trong React cho phép bạn render một thành phần React ra khỏi cây DOM hiện tại và gắn nó vào một phần tử DOM khác trong cây DOM. Điều này cho phép bạn điều khiển việc hiển thị của thành phần trong một vị trí khác nhau trên trang web mà không bị ràng buộc bởi cấu trúc cây DOM của React.

Portals rất hữu ích trong các tình huống như:

Đặt một thành phần vào vị trí đặc biệt trong DOM, chẳng hạn như gắn một tooltip vào phần tử gốc của ứng dụng.
Điều khiển sự hiển thị của thành phần trên các layer khác nhau, chẳng hạn như gắn một modal vào một phần tử nằm ngoài cây DOM của thành phần cha.
Tích hợp với các thư viện UI bên ngoài hoặc các mã HTML/CSS không phải là React.

Việc sử dụng Portals trong React khá đơn giản. Bạn chỉ cần tạo một thành phần Portal, sử dụng ReactDOM.render() để render thành phần đó vào một phần tử DOM mục tiêu:

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

class Portal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    document.getElementById('portal-root').appendChild(this.el);
  }

  componentWillUnmount() {
    document.getElementById('portal-root').removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

// Sử dụng Portal trong ứng dụng
function App() {
  return (
    <div>
      <h1>Ứng dụng React</h1>
      <p>Đây là nội dung của ứng dụng.</p>
      <Portal>
        <p>Đây là nội dung được render ra ngoài cây DOM của ứng dụng.</p>
      </Portal>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Trong ví dụ trên, thành phần Portal được tạo với một phần tử div và được gắn vào phần tử có id là ‘portal-root’ trong cây DOM. Thành phần Portal được sử dụng trong thành phần App và nội dung của nó sẽ được render ra ngoài cây DOM của thành phần App.

Portals là một tính năng mạnh mẽ trong React cho phép bạn kiểm soát cách thành phần được hiển thị và tương tác với cây DOM.

Cú pháp Portals trong React

ReactDOM.createPortal(child, container)

Ở đây, đối số đầu tiên (child) là thành phần, có thể là một phần tử, chuỗi hoặc phân đoạn và đối số thứ hai (container) là một phần tử DOM.

Ví dụ trước React v16

Nói chung, khi bạn muốn trả về một phần tử từ phương thức kết xuất của một thành phần, nó sẽ được gắn dưới dạng một div mới vào DOM và hiển thị phần tử con của thành phần mẹ gần nhất.

render() {  
// React mounts a new div into the DOM and renders the children into it  
  return (  
   <div>  
     {this.props.children}  
   </div>  
  );  
}

Ví dụ sử dụng Portals thông tin

Tuy nhiên, đôi khi chúng ta muốn chèn một thành phần con vào một vị trí khác trong DOM. Nó có nghĩa là React không muốn tạo một div mới. Chúng ta có thể làm điều này bằng cách tạo Portals React.

render() {  
 return ReactDOM.createPortal(  
   this.props.children,  
   myNode,  
 );  
}

Xem thêm Document Object Model(DOM) là gì

Cách thức sử dụng Portals

Để sử dụng Portals trong React, bạn cần thực hiện các bước sau:

Tạo một thành phần Portal: Đầu tiên, bạn cần tạo một thành phần Portal để định nghĩa cách hiển thị thành phần trong DOM nằm ngoài cây DOM của thành phần cha. Để làm điều này, bạn cần sử dụng ReactDOM.createPortal() để tạo ra một Portal. Dưới đây là một ví dụ về cách tạo một thành phần Portal:

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

class Portal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    document.body.appendChild(this.el);
  }

  componentWillUnmount() {
    document.body.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

Trong ví dụ trên, thành phần Portal được tạo với một phần tử div được tạo ra và gắn vào thẻ body trong DOM. Khi thành phần Portal được render, các phần tử con của nó sẽ được render vào phần tử div này.

Sử dụng thành phần Portal trong thành phần cha:

Tiếp theo, bạn có thể sử dụng thành phần Portal trong thành phần cha. Đặt các thành phần bạn muốn hiển thị ngoài cây DOM của thành phần cha trong Portal này. Dưới đây là một ví dụ:

function App() {
  return (
    <div>
      <h1>Ứng dụng React</h1>
      <p>Đây là nội dung của ứng dụng.</p>
      <Portal>
        <p>Đây là nội dung được render ra ngoài cây DOM của ứng dụng.</p>
      </Portal>
    </div>
  );
}

Trong ví dụ trên, thành phần Portal được sử dụng trong thành phần App và nội dung bên trong nó (trong đoạn <p>) sẽ được render ra ngoài cây DOM của thành phần App, đặc biệt là vào thẻ body.

Định vị Portal: Cuối cùng, để xác định vị trí hiển thị của Portal, bạn có thể sử dụng các phương pháp CSS như position, top, left, right, bottom để điều chỉnh vị trí và kiểu hiển thị của phần tử Portal. Bạn có thể tùy chỉnh theo nhu cầu cụ thể của dự án của bạn.

Với các bước trên, bạn đã tạo và sử dụng Portals trong ứng dụng React của mình. Portals cho phép bạn định vị và hiển thị các thành phần React bên ngoài cây DOM của thành phần cha, mang lại linh hoạt và kiểm soát cao hơn trong việc hiển thị các phần tử trên trang web.

Xem thêm Fragments trong React

Đặc trưng Portals trong React

Nó sử dụng React phiên bản 16 và API chính thức của nó để tạo Portals thông tin.
Nó có một dự phòng cho React phiên bản 15.
Nó vận chuyển thành phần con của nó vào một Portals React mới được thêm vào theo mặc định vào document.body.
Nó cũng có thể nhắm mục tiêu phần tử DOM do người dùng chỉ định.
Nó hỗ trợ kết xuất phía máy chủ
Nó hỗ trợ trả về mảng (không cần div của trình bao bọc)
Nó sử dụng <Portal /> và <PortalWithState /> nên không có sự thỏa hiệp giữa tính linh hoạt và tiện lợi.
Nó không tạo ra bất kỳ mớ hỗn độn DOM nào.
Nó không có phụ thuộc, tối giản.

Xem thêm Tìm hiểu tấn công Reflected DOM Injection

Sử dụng Portals trong React khi nào?

Các trường hợp sử dụng phổ biến của Portals React bao gồm:

Modals
Tooltips
Floating menus
Widgets

Ví dụ về cài đặt Portals trong React

Chúng ta có thể cài đặt Portals thông tin React bằng lệnh sau.

$ npm install react-portal --save

Giải thích về React Portal

Tạo một dự án React mới bằng lệnh sau.

$ npx create-react-app reactapp

Mở tệp App.js và chèn đoạn mã sau.

App.js

import React, {Component} from 'react';    
import './App.css'  
import PortalDemo from './PortalDemo.js';  
  
class App extends Component {    
    render () {    
        return (    
            <div className='App'>  
         <PortalDemo />  
    </div>    
        );    
    }    
}    
export default App;

Bước tiếp theo là tạo một thành phần Portals thông tin và nhập nó vào File App.js.

PortalDemo.js

import React from 'react'  
import ReactDOM from 'react-dom'  
  
function PortalDemo(){  
    return ReactDOM.createPortal(  
      <h1>Portals Demo</h1>,  
      document.getElementById('portal-root')  
    )  
}  
export default PortalDemo

Bây giờ, hãy mở tệp Index.html và thêm phần tử <div id = “portal-root”> </div> để truy cập thành phần con bên ngoài nút gốc.

Index.html

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />  
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <meta name="theme-color" content="#000000" />  
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  
    <title>React App</title>  
  </head>  
  <body>  
    <noscript>It is required to enable JavaScript to run this app.</noscript>  
    <div id="root"></div>  
    <div id="portal-root"></div>  
  </body>  
</html>

Khi chúng tôi thực thi ứng dụng React, chúng tôi sẽ nhận được màn hình sau.

Bây giờ, hãy mở Kiểm tra (ctrl + shift + I). Trong cửa sổ này, hãy chọn phần Elements và sau đó nhấp vào thành phần <div id = “portal-root”> </div>. Ở đây, chúng ta có thể thấy rằng mỗi thẻ nằm dưới nút DOM “portal-root”, không phải nút DOM “root”. Do đó, chúng ta có thể thấy rằng cách React Portal cung cấp khả năng thoát ra khỏi cây DOM gốc.

Xem thêm DOM trong JavaScript là gì ?

ReactJS

Portals trong React