页面中 react 渲染的按钮实际已正常挂载，但因父容器未设置显式高度、内容未触发重排或布局塌陷，导致按钮被渲染在视口外（如页面底部），需滚动才能看到；开启 chrome/edge 的 inspect 元素模式会强制触发样式重计算与布局刷新，从而“意外”显示按钮。
这是一个典型的 CSS 布局塌陷 + React 渲染容器脱离文档流 导致的视觉隐藏问题，而非 React 本身渲染失败。核心原因在于：你的 <div id="app"></div> 容器没有明确的高度约束，且其父级（<body>）虽设了 height: 100%，但缺少 min-height: 100vh 或 display: flex 等现代布局保障，导致 <div id="app"> 实际高度为 0，按钮虽已渲染，却位于不可见区域。
? 问题定位关键点
- ✅ ReactDOM.createRoot(document.querySelector("#app")).render(...) 已正确执行（控制台无报错，且 Inspect 可见 DOM 节点）；
- ❌ <div id="app"> 在页面中无高度、无背景色、无边框，肉眼不可见；
- ⚠️ <body> 的 height: 100% 依赖于 <html> 高度，而根元素未设 height: 100vh，导致百分比高度失效；
- ? 开启 DevTools 后，浏览器强制重绘视口并更新布局树，使 #app 容器“获得”自然高度（内容撑开），按钮随之可见——这正是“仅在 Inspect 时出现”的根本原因。
✅ 正确修复方案（推荐）
1. 修正 HTML 结构与 CSS 布局
将 <div id="app"> 提前至 <body> 内部（你当前代码中它位于 </body> 之后，属 HTML 结构错误！），并添加健壮的全屏布局：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maxwell Cognitive Problem Launcher</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
/* 关键：确保 body 占满视口 */
}
#app {
min-height: 100vh; /* ✅ 强制占满视口高度 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
/* 可选：调试用，临时加背景色确认容器位置 */
/* #app { background: rgba(0,100,255,0.1); } */
</style>
</head>
<body>
<h1 id="prob_identifier">ID: 96543210</h1>
<h2 id="student_id">1</h2>
<!-- ✅ 移入 body 内部，并确保顺序合理 -->
<div id="maxwell_container"></div>
<div id="app"></div>
<div id="feedback"></div>
<!-- scripts remain unchanged -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.1/dist/svg.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="./maxwell/app/components/MaxwellCore.jsx" crossorigin></script>
</body>
</html>⚠️ 注意：原始代码中 <div id="app"> 出现在 </body> 之后，属于非法 HTML（解析器会自动纠错，但行为不可控）。务必将其移入 <body> 内。
2. 避免 render() 中无效字符串返回（次要但重要）
当前 ProbProfile.render() 返回的是字符串 '<div>...{this.getData()}...</div>'，这不是合法的 React JSX，{this.getData()} 不会被执行（且 getData 是异步方法，不应在 render 中调用）。应改为：
// ❌ 错误写法（已在答案中暴露问题）
render() {
return (
<div>
<h2>Getting data</h2>
{/* {this.getData()} ← 绝对禁止！ */}
</div>
);
}✅ 正确做法：getData() 应在 useEffect（函数组件）或 componentDidMount（类组件）中调用，状态更新后由 render() 响应式展示加载态或按钮。
3. 补充：确保 SVG 容器不干扰布局
<div id="maxwell_container"> 若用于 SVG 渲染，建议也赋予明确尺寸或 position: absolute 避免影响 #app 流式布局：
#maxwell_container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 置于底层，避免遮挡按钮 */
}✅ 验证步骤
- 保存修正后的 HTML；
- 清除浏览器缓存，硬刷新（Ctrl+F5）；
- 不再依赖 Inspect 工具 —— 按钮应立即在视口中央可见；
- 打开浏览器 DevTools → Elements 面板，确认 <div id="app"> 具有 min-height: 100vh 且包含 <button> 子节点。
? 总结
| 问题根源 | 解决动作 |
|---|---|
| #app 容器脱离标准文档流、无高度 | 添加 min-height: 100vh + display: flex 布局 |
| HTML 结构错误（#app 在 </body> 外） | 移入 <body> 内部 |
| render() 中误用字符串模板 | 改为纯 JSX，异步逻辑移至生命周期钩子 |
| SVG 容器未隔离定位 | 使用 position: absolute 防止布局挤压 |
修复后，按钮将稳定显示于页面可视区域，彻底告别“仅 Inspection 可见”的诡异现象。
