页面中 react 渲染的按钮实际已正常挂载，但因父容器未设置显式高度、内容未触发重排或布局塌陷，导致按钮被渲染在视口外（如页面底部），需滚动才能看到；开启 chrome/edge 的 inspect 元素模式会强制触发样式重计算与布局刷新，从而“意外”显示按钮。

这是一个典型的 CSS 布局塌陷 + React 渲染容器脱离文档流 导致的视觉隐藏问题，而非 React 本身渲染失败。核心原因在于：你的

容器没有明确的高度约束，且其父级（）虽设了 height: 100%，但缺少 min-height: 100vh 或 display: flex 等现代布局保障，导致

实际高度为 0，按钮虽已渲染，却位于不可见区域。

? 问题定位关键点

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

✅ 正确修复方案（推荐）

1. 修正 HTML 结构与 CSS 布局

将

提前至 内部（你当前代码中它位于 之后，属 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>

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

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

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



shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

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

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

// ❌ 错误写法（已在答案中暴露问题）
render() {
  return (
    <div>
      <h2>Getting data</h2>
      {/* {this.getData()} ← 绝对禁止！ */}
    </div>
  );
}

✅ 正确做法：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 可见”的诡异现象。