React自定义元素存在于DOM但不可见的问题排查求助

核心问题分析 #

你的Modal组件存在两个关键问题，导致它能被检测到但无法正常显示：

1. 未根据状态控制Modal的显示/隐藏 #

你在Income组件中定义了editModalVisible状态来控制模态框显示，但并没有将这个状态传递给Modal组件，也没有在Modal内部使用状态判断是否渲染内容。当前Modal只要domReady变为true就会一直渲染，和你点击编辑才显示的预期不符。

修改方案：

• 让Modal接收isVisible属性，根据该属性决定是否渲染内容
• 在Income组件中传入editModalVisible作为isVisible的值

修改后的Modal组件：

import React from "react";
import ReactDom from "react-dom";

const Modal = (props) => {
    // 未传入isVisible或isVisible为false时，不渲染任何内容
    if (!props.isVisible) return null;

    return ReactDom.createPortal(
        <>
            <div className="modal">
                TEST
            </div>
            {/* 绑定关闭模态框的方法 */}
            <div onClick={props.dismissModal} className="backdrop"></div>
        </>,
        document.getElementById('modal-root')
    )
}

export default Modal;

修改Income组件中的Modal调用：

<Modal isVisible={editModalVisible} dismissModal={onDismissEditModal}/>

2. Portal目标节点结构不合理 #

你在App.js中将<Outlet/>放在了modal-root节点内部，这会导致Portal渲染的模态内容和页面路由内容混杂在同一个DOM容器中，容易引发样式层级冲突。

修改方案：
将modal-root设置为独立节点，与<Outlet/>同级，确保模态内容在单独的容器中渲染：

修改后的App.js：

import React from 'react';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Navbar/>
      <div className='body'>
          {/* 页面路由内容 */}
          <Outlet/>
          {/* 独立的模态框容器 */}
          <div id='modal-root'></div>
      </div>
    </div>
  );
}

export default App;

额外优化：移除不必要的domReady状态 #

原Modal组件中的domReady状态完全多余——modal-root节点在App.js渲染完成后就已存在，无需通过useEffect等待DOM加载。移除这部分逻辑可以简化组件，避免不必要的重渲染。

后续验证 #

如果修改后仍无法显示，检查以下几点：

• 确认Navbar组件没有设置过高的z-index（比如z-index: 100），如果有，将.modal的z-index调整为更高值（如1000）
• 检查modal-root节点是否被设置了display: none或visibility: hidden样式
• 验证全局样式是否重置了div的默认属性（如color与背景色一致导致文本不可见）

内容的提问来源于stack exchange，提问作者Ethan S-D