React Portal部署到gh-pages后不生效，控制台可见DOM插入如何修复

问题根因 #

你遇到的是典型的React Portal生产环境样式/资源加载问题，Portal的DOM创建逻辑本身正常，所以能在控制台看到插入的节点，只是因为样式异常导致节点不可见。

修复步骤 #

1. 优先修复Modal基础样式（90%的该类问题都可以通过这个步骤解决）
   弹窗要正常显示在顶层必须设置定位属性和层级，你当前的样式大概率缺失这部分配置，修改Profile.css或Modal.css里的.modal类：

.modal {
  /* 必须设置position，z-index才会生效，fixed表示固定在浏览器视口上 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 半透明背景，衬托弹窗 */
  background: rgba(0, 0, 0, 0.7);
  /* 层级拉到最高，避免被其他页面元素遮挡 */
  z-index: 9999;
  /* 子元素居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

可以先给Profile的根节点加内联样式快速验证：

<div className='modal' style={{position: 'fixed', top: 0, left: 0, zIndex: 9999, width: '100%', height: '100%', background: 'rgba(0,0,0,0.5)'}}>

如果加内联样式后弹窗正常显示，就确认是样式问题，再排查是CSS加载失败还是类名被编译改写。

2. 优化Modal组件的root节点获取逻辑
   你当前是在模块顶层获取#modal-root节点，生产环境js加载顺序可能早于HTML节点渲染，导致节点获取失败，修改Modal.js添加兜底逻辑：

import { Component } from 'react';
import ReactDOM from 'react-dom';
import './Modal.css'

class Modal extends Component {
    constructor(props) {
        super(props)
        this.el = document.createElement('div')
    }

    componentDidMount() {
        // 组件挂载时再获取root节点，不存在就自动创建
        let modalRoot = document.getElementById('modal-root');
        if (!modalRoot) {
            modalRoot = document.createElement('div');
            modalRoot.id = 'modal-root';
            document.body.appendChild(modalRoot);
        }
        modalRoot.appendChild(this.el)
    }

    componentWillUnmount() {
        const modalRoot = document.getElementById('modal-root');
        if (modalRoot && this.el.parentNode === modalRoot) {
            modalRoot.removeChild(this.el)
        }
    }

    render() {
        return ReactDOM.createPortal(this.props.children, this.el)
    }
}

export default Modal;

3. 排查生产环境CSS加载问题
   打开gh-pages页面的浏览器网络面板，检查Modal.css和Profile.css是否有404报错。如果出现404，在package.json中添加homepage字段配置：

{
  "homepage": "https://你的GitHub用户名.github.io/你的仓库名/"
}

4. 排查CSS Modules配置问题
   如果你的项目修改过webpack配置，给普通.css文件开启了CSS Modules，会导致你的.modal类名被编译成哈希值失效。要么把CSS文件改为.module.css后缀，用模块方式引入：

import styles from './Modal.module.css'
// 使用时改为 className={styles.modal}

要么修改webpack配置，关闭普通CSS文件的Modules功能。

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