React中无需直接写入App组件，如何在主应用渲染模态框div？

直接用原生DOM操作在React里行不通，因为React靠虚拟DOM同步状态和真实DOM，手动修改DOM会绕过这个机制，导致状态不同步。推荐用React Portal来解决，这是官方提供的方案，能让组件渲染到DOM树的任意节点，同时仍属于React组件树的一部分，不用把模态框组件直接写在App里。

具体实现步骤 #

1. 在HTML中添加模态框挂载节点 #

打开public/index.html，在根节点#root同级添加一个专门的挂载容器：

<body>
  <div id="root"></div>
  <!-- 模态框挂载节点 -->
  <div id="modal-root"></div>
</body>

2. 创建可复用的Modal组件 #

新建一个Modal.jsx文件，用ReactDOM.createPortal把模态框内容渲染到刚才的modal-root节点：

import React from 'react';
import ReactDOM from 'react-dom/client';

const Modal = ({ isOpen, children, onClose }) => {
  if (!isOpen) return null;

  // 获取模态框挂载节点
  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null;

  return ReactDOM.createPortal(
    // 模态框遮罩层
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }} onClick={onClose}>
      {/* 模态框内容区 */}
      <div style={{
        backgroundColor: 'white',
        padding: '2rem',
        borderRadius: '8px'
      }} onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose} style={{ marginTop: '1rem' }}>关闭</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

3. 在任意子组件中使用Modal #

不管是哪个子组件，只要需要模态框，直接引入并通过状态控制显示隐藏即可，不用在App组件里嵌套：

import React, { useState } from 'react';
import Modal from './Modal';

const ProductCard = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div style={{ padding: '1rem', border: '1px solid #eee' }}>
      <h3>商品卡片</h3>
      <button onClick={() => setShowModal(true)}>查看详情</button>
      
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <h2>商品详情</h2>
        <p>这是商品的详细介绍内容...</p>
      </Modal>
    </div>
  );
};

export default ProductCard;

为什么这个方案可行？ #

• Portal 不会破坏React的组件状态管理，模态框的显示/隐藏仍由组件自身的state控制，和普通组件用法一致。
• 模态框渲染到独立的DOM节点，避免被App组件内的样式或布局影响，同时不用把Modal组件硬编码到App的JSX结构里。
• 完全符合React的设计理念，不会出现原生DOM操作导致的状态不同步问题。

内容的提问来源于stack exchange，提问作者Kush Desai