React实现按钮增减计数器页面无渲染问题排查

核心报错原因（直接导致页面无内容渲染） #

• 浏览器通过CDN直接引入React时错误使用了构建工具专属的import语法：import React, { useState } from "react"是vite/webpack等打包环境下的模块化写法，babel-standalone在浏览器端直接运行时无法解析该导入语句，会直接抛出语法错误中断渲染流程。
• useState Hook 错误定义在组件内部嵌套的counter函数内：React要求Hook必须写在组件函数的最顶层作用域，且该嵌套函数从未被调用，JSX模板完全访问不到内部定义的状态、加减方法，触发引用错误。
• 作用域命名冲突：组件内部嵌套的函数名和计划存储计数的state变量名都叫counter，会触发标识符重复声明的报错。
• HTML挂载点标签闭合错误：<div class="react-insert"><div> 末尾写的是div开标签而非闭合标签</div>，DOM结构异常导致React找不到正确的挂载节点。

其他功能逻辑错误（修复渲染后会导致功能异常的问题） #

• 方法名拼写不匹配：未成年人票区块的点击事件绑定的是incrementCount/decrementCount，和实际定义的方法名不一致，点击会报方法未定义。
• 计数展示写法错误：span标签内写的textContent = {counter}是原生DOM操作写法，JSX中直接写入变量即可渲染，该写法会把textContent = 文本直接展示在页面上。
• 图片路径错误：成人票向下箭头的src写为images/arrowdown，缺失文件后缀，会导致图片加载失败。
• 计数逻辑缺陷：成人票、未成年人票共用同一个计数state，操作任意一侧按钮会导致两个票种数字同步变化，不符合业务需求。

修复后完整代码 #

HTML部分 #

<!-- head内CDN引入无需修改 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- body末尾修正挂载点闭合标签 -->
<div class="react-insert"></div>
<script src="/scripts/tickets.js" type="text/babel"></script>

tickets.js 代码 #

// 移除import语句，CDN引入下直接使用全局React对象
function TicketCounter() {
  // Hook直接写在组件顶层，成人、未成年人票使用独立计数state
  const [adultCount, setAdultCount] = React.useState(0);
  const [minorCount, setMinorCount] = React.useState(0);

  // 成人票加减方法
  const incrementAdult = () => setAdultCount(adultCount + 1);
  const decrementAdult = () => adultCount > 0 && setAdultCount(adultCount - 1);

  // 未成年人票加减方法
  const incrementMinor = () => setMinorCount(minorCount + 1);
  const decrementMinor = () => minorCount > 0 && setMinorCount(minorCount - 1);

  return (
    <div className="ticket-options">
      <div className="option-adult">
        <p>Adult Tickets (16+)</p>
        <div className="ticket-amount">
          <button
            className="arrow-up"
            onClick={incrementAdult}>
            <img src="images/arrowup.png" alt="arrow pointing upwards"/>
          </button>
          <span className="number">
            {/* 直接渲染变量，移除多余的textContent写法 */}
            {adultCount}
          </span>
          <button
            className="arrow-down"
            onClick={decrementAdult}>
            {/* 补全图片后缀 */}
            <img src="images/arrowdown.png" alt="arrow pointing downwards"/>
          </button>
        </div>
      </div>

      <div className="option-minor"> 
        <p>Minor Tickets (15-)</p>
        <div className="ticket-amount">
          <img 
            src={'../images/arrow.png'} 
            alt="arrow up"
            className="arrow-up"
            {/* 修正绑定的方法名 */}
            onClick={incrementMinor}
          />
          <span className="number">
            {minorCount}
          </span>
          <img 
            src={'../images/arrow.png'} 
            alt="arrow down"
            className="arrow-down"
            onClick={decrementMinor}
          />
        </div>
      </div>
    </div>
  )
}

ReactDOM.render(<TicketCounter />, document.querySelector(".react-insert"));

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