使用 React createPortal 掌握模態、工具提示等

在 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、

建立和使用門戶

在下面的範例中，入口網站用於傳送接受狀態的元件 Child 並將該元件移到主體。

import { createPortal } from 'react-dom'

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

  return(
    <div>
      <p> ... </p>
      createPoratl(
        <Child state={state} />,
        document.body
      )
    </div>
  )
}

export default App

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

結論

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

以上是使用 React createPortal 掌握模態、工具提示等的詳細內容。更多資訊請關注PHP中文網其他相關文章！