38 | 使用React Portals实现对话框，使用antd对话框-深入学习React实战进阶

当前位置:　首页>> 技术小册>> 深入学习React实战进阶

### 章节 38 | 使用React Portals实现对话框，结合Ant Design (antd) 对话框

在React应用中，对话框（Modal）是一种常用的UI组件，用于在不离开当前页面的情况下向用户展示重要信息或请求用户输入。虽然许多UI库如Ant Design（简称antd）已经提供了功能丰富的对话框组件，但理解其背后的React Portal机制，可以帮助我们更好地控制对话框的渲染位置，实现更高级的布局效果。本章节将深入探讨如何使用React Portals技术结合antd的Modal组件，来创建和管理对话框。

#### 一、React Portals简介

React Portals 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的能力。这通常用于当子节点需要被渲染到根DOM节点之外的地方时，比如模态框、工具提示或下拉菜单等。使用Portals，我们可以保持组件树的结构，同时控制组件的挂载点。

在React中，`ReactDOM.createPortal` 方法用于创建Portal。该方法接收两个参数：第一个参数是要渲染的React子节点，第二个参数是DOM元素，即子节点将被渲染到的目标节点。

#### 二、antd Modal基础

Ant Design的Modal组件是一个基于React的模态对话框，用于在当前页面之上弹出一个对话框，常用于提示、询问、消息通知等场景。它提供了丰富的API，如控制显示隐藏的`visible`属性、自定义内容的`bodyStyle`和`footer`等。

```jsx
import { Modal } from 'antd';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

const showModal = () => {
    setIsVisible(true);
  };

const handleOk = () => {
    setIsVisible(false);
  };

const handleCancel = () => {
    setIsVisible(false);
  };

return (
    <>
      <button onClick={showModal}>打开对话框</button>
      <Modal
        title="基本对话框"
        visible={isVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>对话框内容...</p>
      </Modal>
    </>
  );
};
```

#### 三、结合React Portals自定义Modal渲染位置

虽然antd的Modal组件已经足够灵活，能够应对大多数场景，但在某些特殊情况下，我们可能需要将Modal渲染到特定的DOM节点中，而非默认的body内。这时，React Portals就派上了用场。

然而，值得注意的是，antd的Modal组件内部已经使用了Portals技术来确保模态框能够覆盖其他内容，并且通常不需要我们手动去控制其渲染位置。但如果确实需要自定义，我们可以通过修改antd Modal的底层实现或使用CSS来实现类似效果（虽然这通常不是推荐的做法，因为会涉及到对第三方库的修改）。

更实际且推荐的方式是，如果你需要控制Modal的显示层级（比如让它出现在某个特定层级的z-index之上），可以通过CSS调整。如果需要完全控制渲染位置（这在antd标准Modal中并不常见需求），你可能需要考虑自己实现一个基于Portal的对话框组件。

#### 四、模拟自定义Modal渲染位置（理论示例）

尽管antd Modal不直接支持通过props指定渲染位置，但我们可以模拟这一过程来理解其背后的思想。下面是一个简化的例子，展示了如何使用React Portals创建一个自定义的对话框组件：

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

const CustomPortalModal = ({ children, containerId, isVisible }) => {
  const modalRoot = useRef(null);

useEffect(() => {
    if (!modalRoot.current) {
      modalRoot.current = document.getElementById(containerId);
    }
  }, [containerId]);

if (!isVisible || !modalRoot.current) return null;

return ReactDOM.createPortal(
    <div className="custom-modal">
      {children}
      {/* 模拟关闭按钮 */}
      <button onClick={() => console.log('Close Modal')}>关闭</button>
    </div>,
    modalRoot.current
  );
};

// 使用示例
const App = () => {
  const [isVisible, setIsVisible] = useState(false);

return (
    <>
      <div id="custom-modal-root" style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} />
      <button onClick={() => setIsVisible(true)}>打开自定义对话框</button>
      <CustomPortalModal containerId="custom-modal-root" isVisible={isVisible}>
        <p>这是通过Portal渲染到指定DOM的对话框。</p>
      </CustomPortalModal>
    </>
  );
};
```

请注意，上述示例仅用于说明如何结合React Portals创建一个基本的自定义对话框组件，并非antd Modal的直接用法。在实际项目中，推荐使用antd提供的Modal组件，并通过CSS来调整其样式和层级，以满足大部分需求。

#### 五、总结

React Portals为React应用提供了一种强大的机制，用于将子组件渲染到DOM树的任意位置。虽然antd的Modal组件已经足够灵活，能够处理大部分场景下的对话框需求，但了解Portals的使用方法可以让我们在需要时能够创建更复杂的UI结构。通过本章节的学习，你应该能够理解React Portals的基本概念，以及如何结合antd的Modal组件或自定义组件来实现更高级的对话框功能。

该分类下的相关小册推荐：

React全家桶--前端开发与实例(上)

剑指Reactjs

React全家桶--前端开发与实例(下)

React 进阶实践指南

ReactJS面试指南