如何在CodePen中使用React函数组件？解决require未定义报错

问题原因 #

CodePen默认通过CDN引入的是全局UMD版本的React/ReactDOM，不是ES模块，浏览器环境不支持import语法，会自动尝试用Node.js的require处理，而浏览器里没有require函数，所以触发报错。

修复步骤 #

• 删掉开头的import语句，全局的React已经把useState、useEffect、useRef这些Hook挂载到React对象上，直接调用即可。
• 给useEffect加上依赖数组[count]，避免每次组件渲染都执行副作用（只在count变化时更新prevRef）。
• 处理初始渲染时prevRef.current为undefined的显示问题，比如用空值合并运算符??兜底。

修改后的完整代码 #

function Test() {
  const [count, setCount] = React.useState(0);
  const prevRef = React.useRef();
  
  React.useEffect(() => {
    console.log('ref----', prevRef.current);
    prevRef.current = count;
  }, [count]) // 只在count变化时执行
  
  return (
    <div>
      <div onClick={() => setCount(count+1)}>+1</div>
      <div>{`count: ${count}`}</div>
      <div>{`precount: ${prevRef.current ?? 0}`}</div> {/* 兜底处理undefined */}
    </div>
  )
}

ReactDOM.render(<Test />, document.getElementById("app"));

额外确认 #

如果是自己新建的CodePen项目，要在Settings > JavaScript里确认已经添加了React和ReactDOM的CDN引用（CodePen的React模板默认已经配置好）。

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