React中Portals组件使用教程

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《React中Portals组件怎么用？》，聊聊，希望可以帮助到正在努力赚钱的你。

React Portal 允许将组件渲染到 DOM 树之外，解决布局限制问题。1. 使用 ReactDOM.createPortal 方法，指定要渲染的组件和目标 DOM 节点；2. 创建 DOM 节点并挂载到合适的位置（如 document.body）；3. 在组件卸载时清理 DOM 节点以避免内存泄漏；4. 适用于模态框、提示层等需要脱离父级样式限制的场景；5. Portal 的事件仍遵循 React 组件树冒泡机制；6. 可与 Context 配合实现跨层级状态共享；7. 注意性能优化，避免频繁创建销毁节点。合理使用可提升应用灵活性与维护性。

React Portal 是一种将子节点渲染到 DOM 树之外的强大机制。简单来说，它允许你把组件渲染到 DOM 结构的任何位置，而不用受限于父组件的层级关系。这在处理模态框、提示框、悬浮层等需要脱离常规布局的场景时非常有用。

解决方案：

使用 React Portal 的核心在于 ReactDOM.createPortal(child, container) 方法。child 是你想渲染的 React 组件，container 是你想把组件渲染到的 DOM 节点。

1. 创建 DOM 节点： 首先，你需要在 document 中创建一个 DOM 节点，作为 Portal 的挂载点。通常在 componentDidMount 或 useEffect 中创建，确保 DOM 已经加载。

   

   import React, { useState, useEffect } from 'react';
   import ReactDOM from 'react-dom';
   
   function MyComponent() {
     const [container] = useState(() => document.createElement('div'));
   
     useEffect(() => {
       document.body.appendChild(container);
       return () => {
         document.body.removeChild(container);
       };
     }, [container]);
   
     return ReactDOM.createPortal(
       <div>我是一个 Portal 组件！</div>,
       container
     );
   }
   
   export default MyComponent;

2. 渲染 Portal： 使用 ReactDOM.createPortal 将你的组件渲染到刚刚创建的 DOM 节点中。

3. 清理： 在组件卸载时，记得清理创建的 DOM 节点，避免内存泄漏。可以在 componentWillUnmount 或 useEffect 的 cleanup 函数中完成。

为什么要用 Portal？

Portal 最直接的用处，就是解决 overflow: hidden、z-index 等 CSS 属性带来的布局问题。想象一下，如果你的模态框被父元素的 overflow: hidden 裁剪，或者 z-index 不够高而被遮挡，使用 Portal 就可以轻松地将模态框渲染到 标签下，避免这些问题。

Portal 的事件冒泡机制

需要注意的是，尽管 Portal 将组件渲染到了 DOM 树之外，但其事件冒泡机制仍然遵循 React 组件树的结构。这意味着，Portal 组件内部触发的事件，仍然会冒泡到其 React 父组件，而不是 Portal 挂载点的父元素。这对于处理事件监听和状态管理非常重要。

Portal 在模态框中的应用

模态框是 Portal 的一个典型应用场景。假设你有一个模态框组件，你希望它始终显示在最顶层，并且不受父组件样式的限制。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  const [modalRoot] = useState(() => document.createElement('div'));

  useEffect(() => {
    modalRoot.setAttribute('id', 'modal-root'); // 方便查找
    document.body.appendChild(modalRoot);
    return () => {
      document.body.removeChild(modalRoot);
    };
  }, [modalRoot]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-content">
        <button onClick={onClose}>关闭</button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

在这个例子中，Modal 组件创建了一个 div 元素，并将其添加到 标签下。然后，使用 ReactDOM.createPortal 将模态框的内容渲染到这个 div 元素中。这样，模态框就可以独立于父组件的样式和布局，始终显示在最顶层。

Portal 与 Context 的配合使用

Portal 也可以与 React Context 结合使用，实现跨组件的状态共享。例如，你可以在 Portal 组件中使用 Context Provider，为 Portal 内部的组件提供状态。

import React, { createContext, useState, useContext } from 'react';
import ReactDOM from 'react-dom';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function MyPortalContent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>当前主题：{theme}</p>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}


function PortalWithContext() {
  const [container] = useState(() => document.createElement('div'));

  useEffect(() => {
    document.body.appendChild(container);
    return () => {
      document.body.removeChild(container);
    };
  }, [container]);

  return ReactDOM.createPortal(
    <MyPortalContent />,
    container
  );
}

// 使用方法
function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>主应用</h1>
        <PortalWithContext />
      </div>
    </ThemeProvider>
  );
}

export default App;

在这个例子中，ThemeProvider 组件提供了 theme 和 toggleTheme 两个状态，MyPortalContent 组件通过 useContext Hook 获取这些状态，并根据主题来改变背景颜色和文本颜色。即使 MyPortalContent 组件被渲染到 DOM 树之外，它仍然可以访问 Context 中提供的状态。

Portal 的性能考量

虽然 Portal 非常有用，但在使用时也需要注意性能问题。频繁地创建和销毁 Portal 节点可能会导致性能下降。因此，建议尽量复用 Portal 节点，避免不必要的 DOM 操作。

另外，由于 Portal 的事件冒泡机制与 DOM 树的结构不同，可能会导致事件处理逻辑变得复杂。因此，在使用 Portal 时，需要仔细考虑事件处理的方式，避免出现意外的行为。

总而言之，React Portal 是一种强大的工具，可以帮助你解决各种布局和渲染问题。只要合理使用，就可以大大提高你的 React 应用的灵活性和可维护性。记住，理解其背后的原理，才能更好地运用它。

今天关于《React中Portals组件使用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于模态框,事件冒泡,DOM树,ReactDOM.createPortal,ReactPortals的内容请关注golang学习网公众号！