Material UI 的 Portal 组件是一个用于将子元素渲染到 DOM 中不同位置的工具。这在实现模态框、浮动工具提示等场景中非常有用，因为它能够将内容脱离父组件的层级结构，使得样式和层级更为灵活。本文将详细介绍 Portal 的使用，涵盖所有重要属性和方法，并提供多个示例代码。

1. 基础概念

Portal 组件允许我们将组件渲染到不同于其父组件的 DOM 节点中。这是通过 React 的 createPortal API 实现的，能够帮助开发者更好地管理 z-index 和位置问题。

2. 安装 Material UI

如果你尚未安装 Material UI，可以通过以下命令来安装：

npm install @mui/material @emotion/react @emotion/styled

3. Portal 组件的基本使用

3.1 引入必要的组件

首先，引入 Portal 和其他需要使用的组件：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Portal from '@mui/material/Portal';

3.2 创建基本的 Portal

下面是一个简单的 Portal 示例，它在点击按钮时将内容渲染到 body 元素中：

const SimplePortal = () => {
  const [open, setOpen] = useState(false);

  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button variant="contained" onClick={handleToggle}>
        {open ? '关闭 Portal' : '打开 Portal'}
      </Button>
      {open && ReactDOM.createPortal(
        <Box
          sx={{
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            bgcolor: 'background.paper',
            boxShadow: 24,
            p: 4,
            zIndex: 1300, // 确保在顶部
          }}
        >
          <Typography variant="h6">这是一个 Portal!</Typography>
          <Button variant="outlined" onClick={handleToggle}>关闭</Button>
        </Box>,
        document.body // 将内容渲染到 body
      )}
    </div>
  );
};

3.3 解释代码

• 状态管理：使用 useState 管理 open 状态，控制 Portal 的显示与隐藏。
• 事件处理：handleToggle 方法切换 open 状态。
• Portal 使用：ReactDOM.createPortal 将 Box 元素渲染到 document.body 中。

4. 属性和方法

4.1 重要属性

• container: 指定 Portal 渲染的目标 DOM 节点。默认情况下是 document.body。
• children: Portal 内部要渲染的组件。
• onClick: 可选属性，定义点击事件。

4.2 重要方法

• handleToggle: 切换 Portal 显示的自定义方法。

5. 高级用法

5.1 结合其他组件

我们可以将 Portal 与 Modal 组件结合使用，以创建更复杂的 UI 交互。

import Modal from '@mui/material/Modal';

const PortalWithModal = () => {
  const [open, setOpen] = useState(false);

  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button variant="contained" onClick={handleToggle}>
        {open ? '关闭 Modal' : '打开 Modal'}
      </Button>
      <Modal open={open} onClose={handleToggle}>
        <Portal>
          <Box
            sx={{
              position: 'fixed',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              bgcolor: 'background.paper',
              boxShadow: 24,
              p: 4,
            }}
          >
            <Typography variant="h6">这是一个通过 Portal 的 Modal!</Typography>
            <Button variant="outlined" onClick={handleToggle}>关闭</Button>
          </Box>
        </Portal>
      </Modal>
    </div>
  );
};

5.2 使用不同的容器

你可以将 Portal 渲染到特定的 DOM 元素中，而不是默认的 document.body：

const CustomContainerPortal = () => {
  const [open, setOpen] = useState(false);
  const container = document.getElementById('custom-container'); // 指定自定义容器

  return (
    <div>
      <Button variant="contained" onClick={() => setOpen(!open)}>
        {open ? '关闭 Portal' : '打开 Portal'}
      </Button>
      {open && ReactDOM.createPortal(
        <Box sx={{ ...styles }}>
          <Typography>自定义容器中的 Portal</Typography>
          <Button onClick={() => setOpen(false)}>关闭</Button>
        </Box>,
        container // 渲染到自定义容器
      )}
    </div>
  );
};

6. 实际应用示例

下面是一个结合了不同功能的完整示例：

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <SimplePortal />
      <PortalWithModal />
      <CustomContainerPortal />
    </div>
  );
};

// 在你的 HTML 文件中添加:
// <div id="custom-container"></div>

7. 总结

Portal 组件为我们提供了一种强大而灵活的方法来控制组件的渲染位置。在许多复杂的 UI 设计中，特别是涉及模态、浮动框和下拉菜单时，使用 Portal 可以简化布局和样式管理。通过本文的详细讲解和示例代码，你应该对 Portal 的使用有了更深入的理解。

如果你有任何疑问或建议，欢迎在评论区留言！