使用React如何封裝Portal可重複使用元件
react的核心之一是元件，以下這篇文章主要為大家介紹了關於React教學之封裝一個Portal可重複使用元件的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考借鏡，下面一起學習學習吧。
Portal簡介
所以我們需要的一個通用元件，它做如下的事情：
可以聲明式的寫在一個元件中
並不真正render在被宣告的地方
-
支援過渡動畫
那麼，像是modal、tooltip、notification等元件都是可以基於這個元件的。我們叫這個組件為Portal。
使用了React16 的你，對Portal至少有所了解或熟練使用。
Portal可以創建一個在你的root元素之外的DOM。
1、通常你的網站只有一個root
<body> <p id="root"></p> </body>
2、使用Portal之後，可以變成下面這樣
<body> <p id="root"></p> <p id="portal"></p> </body>
Portal高階元件封裝
Portal的demo在官網上可以看到，而我們要實現的是將它封裝成一個可以重複使用的組件。
目標
不需要手動在body下面增加HTML，透過元件自己去建立。
<CreatePortal id, //可以传入id className, //可以传入className style //可以传入style > 此处插入p或者react组件 </CreatePortal>
實作方案
1、建立一個createPortal函數，該函數將會return一個Portal元件
function createPortal() {
}
export default createPortal()2、建立Portal元件
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
}
return Portal
}
export default createPortal()3、render函數實現，用createPortal建立portal。
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}4、componentDidMount函數實現，將dom添加到body下面
componentDidMount() {
document.body.appendChild(this.el);
}5、componentWillUnmount函數實現，清除DOM結構
componentWillUnmount() {
document.body.removeChild(this.el)
}6、實現props，包括id、 className、style
constructor(props) {
super(props)
this.el = document.createElement('p')
if (!!props) {
this.el.id = props.id || false
if (props.className) this.el.className = props.className
if (props.style) {
Object.keys(props.style).map((v) => {
this.el.style[v] = props.style[v]
})
}
document.body.appendChild(this.el)
}
}7、完整程式碼
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
constructor(props) {
super(props)
this.el = document.createElement('p')
if (!!props) {
this.el.id = props.id || false
if (props.className) this.el.className = props.className
if (props.style) {
Object.keys(props.style).map((v) => {
this.el.style[v] = props.style[v]
})
}
document.body.appendChild(this.el)
}
}
componentDidMount() {
document.body.appendChild(this.el);
}
componentWillUnmount() {
document.body.removeChild(this.el)
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}
}
Portal.propTypes = {
style: PropTypes.object
}
return Portal
}
export default createPortal()上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是使用React如何封裝Portal可重複使用元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何利用React和RabbitMQ建立可靠的訊息應用
Sep 28, 2023 pm 08:24 PM
如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言：現代化的應用程式需要支援可靠的訊息傳遞，以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫，用於建立使用者介面，而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用，並提供具體的程式碼範例。 RabbitMQ概述：
React Router使用指南：如何實現前端路由控制
Sep 29, 2023 pm 05:45 PM
ReactRouter使用指南：如何實現前端路由控制隨著單頁應用的流行，前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫，提供了豐富的功能和易用的API，使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範例。安裝ReactRouter首先，我們需要
PHP、Vue和React：如何選擇最適合的前端框架？
Mar 15, 2024 pm 05:48 PM
PHP、Vue和React：如何選擇最適合的前端框架？隨著互聯網技術的不斷發展，前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架，每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時，開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使
Java框架與前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架與React框架的整合：步驟：設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。
如何利用React開發一個響應式的後台管理系統
Sep 28, 2023 pm 04:55 PM
如何利用React開發一個響應式的後台管理系統隨著互聯網的快速發展，越來越多的企業和組織需要一個高效、靈活、易於管理的後台管理系統來處理日常的操作事務。 React作為目前最受歡迎的JavaScript庫之一，提供了一種簡潔、高效和可維護的方式來建立使用者介面。本文將介紹如何利用React開發一個響應式的後台管理系統，並給出具體的程式碼範例。建立React專案首先
vue.js vs.反應：特定於項目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。
react有哪些閉包
Oct 27, 2023 pm 03:11 PM
react有事件處理函數、useEffect和useCallback、高階元件等等閉包。詳細介紹：1、事件處理函數閉包：在React中，當我們在元件中定義事件處理函數時，函數會形成一個閉包，可以存取元件作用域內的狀態和屬性。這樣可以在事件處理函數中使用元件的狀態和屬性，實現互動邏輯；2、useEffect和useCallback中的閉包等等。
React在HTML中的作用：增強用戶體驗
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。
