? 问题定位关键点

• ✅ ReactDOM.createRoot(document.querySelector("#app")).render(...) 已正确执行（控制台无报错，且 Inspect 可见 DOM 节点）；
• ❌
  在页面中无高度、无背景色、无边框，肉眼不可见；
• ⚠️ 的 height: 100% 依赖于 html> 高度，而根元素未设 height: 100vh，导致百分比高度失效；
• ? 开启 DevTools 后，浏览器强制重绘视口并更新布局树，使 #app 容器“获得”自然高度（内容撑开），按钮随之可见——这正是“仅在 Inspect 时出现”的根本原因。

✅ 正确修复方案（推荐）

1. 修正 HTML 结构与 CSS 布局

将

提前至 内部（你当前代码中它位于 之后，属 HTML 结构错误！），并添加健壮的全屏布局：

  
  
  
  


  
ID: 96543210
  
1

  
  

  

  


  
  
  
  
  
  

⚠️ 注意：原始代码中 出现在 之后，属于非法 HTML（解析器会自动纠错，但行为不可控）。务必将其移入 内。

2. 避免 render() 中无效字符串返回（次要但重要）

当前 ProbProfile.render() 返回的是字符串 '

...{this.getData()}...

'，这不是合法的 React JSX，{this.getData()} 不会被执行（且 getData 是异步方法，不应在 render 中调用）。应改为：

// ❌ 错误写法（已在答案中暴露问题）
render() {
  return (
    

      
Getting data
      {/* {this.getData()} ← 绝对禁止！ */}
    
  );
}

✅ 正确做法：getData() 应在 useEffect（函数组件）或 componentDidMount（类组件）中调用，状态更新后由 render() 响应式展示加载态或按钮。



阿里妈妈·创意中心

阿里妈妈营销创意中心

下载

3. 补充：确保 SVG 容器不干扰布局

若用于 SVG 渲染，建议也赋予明确尺寸或 position: absolute 避免影响 #app 流式布局：

#maxwell_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 置于底层，避免遮挡按钮 */
}

✅ 验证步骤

1. 保存修正后的 HTML；
2. 清除浏览器缓存，硬刷新（Ctrl+F5）；
3. 不再依赖 Inspect 工具 —— 按钮应立即在视口中央可见；
4. 打开浏览器 DevTools → Elements 面板，确认
   具有 min-height: 100vh 且包含 子节点。

   ? 总结

   问题根源	解决动作
   #app 容器脱离标准文档流、无高度	添加 min-height: 100vh + display: flex 布局
   HTML 结构错误（#app 在 外）	移入 内部
   render() 中误用字符串模板	改为纯 JSX，异步逻辑移至生命周期钩子
   SVG 容器未隔离定位	使用 position: absolute 防止布局挤压

   修复后，按钮将稳定显示于页面可视区域，彻底告别“仅 Inspection 可见”的诡异现象。