在 React 中建立模態和工具提示通常很複雜，難以設計樣式，並會導致許多樣式錯誤。
createPortal api 簡化了這個過程，允許在主 DOM 之外渲染元件，從而簡化樣式設計和可維護性。在這篇文章中，我們將學習如何使用此工具在 React 中以正確的方式建立模式和工具提示。

了解 createPortal api

createPortal 是 React 內建函數，可讓您在 DOM 的不同部分渲染元件。它對於建立特別有用：模態和疊加、第三方元件和自訂 UI 元素。

它是如何運作的

入口網站用於元件的返回語句內，它僅更改 DOM 節點的物理位置。這就像將 DOM 節點傳送到主 DOM 樹之外。 createPortal API 存取兩個參數和第三個可選參數：

• Children：任何可以用 React、div、元件或 React 片段渲染的內容。
• domNode：這是要放置的孩子的位置。
• key（可選）：用作門戶金鑰的唯一數字或字串。

如果我們假設我們在組件A 中創建一個門戶並在組件B 中渲染它，則門戶的子級將訪問組件A 的所有狀態和變量，並在組件A 中渲染時像在組件A 中一樣運行它B、

建立和使用門戶

在下面的範例中，portal 用來傳送接受狀態的元件 Child 並將該元件移到主體。

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

現在子元件將在 HTML 中的 body 標籤中呈現。

結論

createPortal 是 React 中一個很有價值的工具，用於建立模式、工具提示和其他需要在主 DOM 樹之外渲染的元件。透過使用此工具，您可以實現這些元素的更清晰、更靈活、更有效率的方法。