某些情況下，我們希望渲染的內容獨立于父組件，甚至是獨立于當前掛載到的DOM元素中（默認都是掛載到id為root的DOM元 素上的）。

Portal 提供了一種將子節點渲染到存在于父組件以外的 DOM 節點的優秀的方案：

• 第一個參數（child）是任何可渲染的 React 子元素，例如一個元素，字符串或 fragment；
• 第二個參數（container）是一個 DOM 元素；
  

通常來講，當你從組件的 render 方法返回一個元素時，該元素將被掛載到 DOM 節點中離其最近的父節點：然而，有時候將子元素插入到 DOM 節點中的不同位置也是有好處的：

Modal組件案例

比如說，我們準備開發一個Modal組件，它可以將它的子組件渲染到屏幕的中間位置：

• 步驟一：修改index.html添加新的節點
  

• 步驟二：編寫這個節點的樣式
  
  

• 步驟三：編寫組件代碼
  

import React, {PureComponent} from 'react'; import ReactDom from 'react-dom' class Modal extends PureComponent {render() {return ReactDom.createPortal(this.props.children,document.getElementById('modal'))} } class Home extends PureComponent {render() {return (<div><h2>Home</h2><Modal><h2>Title</h2></Modal></div>);} } class App extends PureComponent {render() {return (<div><Home /></div>);} } export default App;

總結

以上是生活随笔為你收集整理的React Portals的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。