React中createPortal 的详细用法

createPortal 是 React 提供的一个实用工具,用于将 React 子元素渲染到 DOM 中的某个位置,而该位置与父组件不在同一个 DOM 层次结构中。这在某些特殊场景下非常有用,比如实现模态框、弹出菜单、固定定位元素等功能。

基本语法

JavaScript

复制

复制代码
const portal = createPortal(child, container);
  • child 是要渲染的 React 子元素。

  • container 是 DOM 元素,子元素将被渲染到这个元素中。

使用场景

  1. 模态框:将模态框的内容渲染到 body 的顶层,以确保模态框不会被其他元素遮挡。

  2. 弹出菜单:将弹出菜单渲染到 body 的顶层,以确保菜单不会被其他元素遮挡。

  3. 固定定位元素:将固定定位的元素渲染到 body 的顶层,以确保元素的定位不会受到父元素的影响。

示例

下面是一个使用 createPortal 实现模态框的示例:

复制代码
import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';

function Modal() {
  const [showModal, setShowModal] = useState(false);

  // 创建一个 DOM 元素作为模态框的容器
  const modalRef = React.useRef(document.createElement('div'));

  useEffect(() => {
    // 将模态框容器添加到 body 中
    document.body.appendChild(modalRef.current);
    return () => {
      // 组件卸载时移除模态框容器
      document.body.removeChild(modalRef.current);
    };
  }, []);

  return (
    <>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      {showModal && (
        createPortal(
          <div className='modal-overlay'>
            <div className='modal'>
              <h2>Modal Title</h2>
              <p>This is a modal content</p>
              <button onClick={() => setShowModal(false)}>Close Modal</button>
            </div>
          </div>,
          modalRef.current
        )
      )}
    </>
  );
}

export default Modal;
CSS
复制代码
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 300px;
}

优点

  • 灵活性:可以将子元素渲染到 DOM 中的任意位置。

  • 避免样式冲突:通过将元素渲染到不同的 DOM 层次结构中,可以避免样式冲突。

  • 优化性能:通过减少不必要的 DOM 操作,可以优化性能。

注意事项

  • 清理资源:在组件卸载时,确保移除创建的 DOM 元素,以避免内存泄漏。

  • 样式隔离:确保渲染到不同 DOM 层次结构中的元素不会受到其他样式的影响。

总结

createPortal 是 React 提供的一个强大工具,用于将子元素渲染到 DOM 中的任意位置。通过使用 createPortal,可以实现模态框、弹出菜单等功能,并确保这些元素的样式和行为不受父组件的影响。

以下是一个更完整的示例,展示如何使用 createPortal 实现一个模态框:

复制代码
import React, { useState } from 'react';
import { createPortal } from 'react-dom';

function Modal() {
  const [showModal, setShowModal] = useState(false);

  // 创建一个 DOM 元素作为模态框的容器
  const modalRef = React.useRef(document.createElement('div'));

  // 将模态框容器添加到 body 中
  useEffect(() => {
    document.body.appendChild(modalRef.current);
    return () => {
      document.body.removeChild(modalRef.current);
    };
  }, []);

  return (
    <>
      <button onClick={() => setShowModal(true)}>Open Modal</button>

      {showModal && (
        createPortal(
          <div className='modal-overlay'>
            <div className='modal'>
              <h2>Modal Title</h2>
              <p>This is a modal content</p>
              <button onClick={() => setShowModal(false)}>Close Modal</button>
            </div>
          </div>,
          modalRef.current
        )
      )}
    </>
  );
}

export default Modal;

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
}

在这个示例中,模态框的内容被渲染到一个独立的 DOM 容器中,该容器被添加到 body 中。这确保了模态框不会被其他元素遮挡,并且可以独立于父组件进行样式控制。

相关推荐
编程猪猪侠21 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞25 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架