如何在 React 中使用 Portals？

React 是一個用於構建用戶界面的 JavaScript 庫，它可以讓開發者更輕鬆地構建高性能的網頁應用程序。Portals 是 React 中的一個功能，它可以讓開發者將元素渲染到 DOM 節點之外的位置。

Portals 可以用於解決一些 React 中的挑戰，例如對話框、提示框和其他彈出式元素。它們可以讓開發者將元素渲染到任何位置，而不受 React 應用程序的結構限制。

使用 Portals 的步驟如下：

1. 創建 Portal

首先，您需要創建一個 Portal，它是一個 React 元素，可以渲染到 DOM 節點之外的位置。您可以使用 ReactDOM.createPortal() 方法創建 Portal，它接受兩個參數：要渲染的元素和要渲染到的 DOM 節點。

const portal = ReactDOM.createPortal(
  
Hello, world!
,
  document.getElementById('portal-root')
);

2. 渲染 Portal

接下來，您需要將 Portal 渲染到您的 React 應用程序中。您可以將 Portal 渲染到任何 React 元素中，例如

<

div> 或 。

const App = () => (
  

    
My App
    {portal}
  
);

3. 更新 Portal

當您的應用程序的狀態更改時，Portal 也會更新。您可以使用 React 的生命週期方法來更新 Portal，例如 componentDidUpdate() 或 useEffect()。

class App extends React.Component {
  componentDidUpdate() {
    // Update the portal
  }

  render() {
    return (
      

        
My App
        {portal}
      
    );
  }
}

總結

Portals 是 React 中的一個功能，它可以讓開發者將元素渲染到 DOM 節點之外的位置。使用 Portals 的步驟包括：創建 Portal、渲染 Portal 和更新 Portal。Portals 可以讓開發者更輕鬆地構建彈出式元素，而不受 React 應用程序的結構限制。