React Portals - Cập nhật mới nhất về React Portals

09/08/2023 01:34

Trong React, thành phần cha mẹ luôn muốn thành phần con của nó đi đến đâu. Đó là lý do tại sao khái niệm React Portals xuất hiện.

Phiên bản React 16.0 đã giới thiệu cổng React vào tháng 9 năm 2017 . Cổng thông tin React cung cấp một cách để kết xuất một phần tử bên ngoài cấu trúc 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ó để kết xuất thành phần con bên ngoài hệ thống phân cấp thành phần cha của nó. Nếu chúng ta làm điều này, nó sẽ phá vỡ quy ước trong đó một thành phần cần hiển thị dưới dạng phần tử mới và tuân theo hệ thống phân cấp cha-con . Trong React, thành phần cha mẹ luôn muốn thành phần con của nó đi đến đâu. Đó là lý do tại sao khái niệm cổng thông tin React xuất hiện.

cú pháp

ReactDOM.createPortal(con, vùng chứa)

Ở đây, đối số đầu tiên (con) là thành phần, có thể là một phần tử, chuỗi hoặc đoạn và đối số thứ hai (vùng chứa) 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à kết xuất phần tử con của thành phần cha 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 cổng 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 cổng React.

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

Đặc trưng

Nó sử dụng React phiên bản 16 và API chính thức của nó để tạo cổng.
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 cổng React mới được thêm vào document.body theo mặc định.
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ề các mảng (không cần div 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.

Khi nào thì sử dụng?

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

phương thức
Chú giải công cụ
menu nổi
tiện ích

Cài đặt

Chúng ta có thể cài đặt cổng 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.

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;  

The next step is to create a portal component and import it in the App.js file.

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>