如何在 Next.js 中使用 React Portals-JavaScript中文网-JavaScript教程资源分享门户

React Portals 是一种将组件渲染到 DOM 树中比自身组件更高层级的位置的技术。这使得您可以将一些 UI 组件渲染到页面上不同的位置，而不会破坏应用程序的布局。

在项目中使用 Next.js 时，您可能想要在其中使用 React Portals。本文将向您介绍如何在 Next.js 中使用 React Portals。

准备工作

首先，您需要安装 Required npm 包：

npm install react react-dom

创建 Portal 组件

现在让我们创建一个简单的 Portal 组件，并将其用于演示。

`Portal.js`

// javascriptcn.com code example
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const Portal = ({ children }) => {
  const portalRoot = document.getElementById('portal-root');
  const el = document.createElement('div');

  useEffect(() => {
    portalRoot.appendChild(el);

    return () => {
      portalRoot.removeChild(el);
    };
  }, [el, portalRoot]);

  return ReactDOM.createPortal(children, el);
};

export default Portal;

在这里我们：

创建 div 元素作为 Portal 的目标容器（el）
使用 useEffect 钩子函数，在组件装载时将该容器添加到 DOM 中，并在组件卸载时移除该容器
使用 createPortal 将传递给 Portal 组件的子元素渲染到容器中

使用 Portal 组件

现在让我们在页面上使用此 Portal 组件，并将其用于演示。

`pages/index.js`

// javascriptcn.com code example
import Portal from '../components/Portal';

export default function Home() {
  return (
    <>
      <h1>Welcome to my website!</h1>
      <Portal>
        <button>Click Me!</button>
      </Portal>
    </>
  );
}

在这里我们：

引入刚刚创建的 Portal 组件
在页面上使用该组件，将 <button> 元素作为传入 Portal 组件的子元素

现在，当您在页面上单击 "Click Me!" 按钮时，<button> 元素将被渲染到容器中。

结论

通过使用 React Portals，您可以将组件渲染到 DOM 树中比自身组件更高层级的位置，而不会破坏布局。

在本文中，我们学习了如何在 Next.js 中使用 React Portals。现在您可以将此技术应用于您的应用程序中，使其更加灵活和模块化。

希望本文对您有所帮助！如果您有任何疑问或建议，请随时在评论区留言。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67358f9c0bc820c5824f2013