如何在Codepen中使用React 18？函数组件Hook使用故障求助

问题原因 #

你遇到的核心问题是导入的React实例与全局ReactDOM依赖的React实例不匹配，导致Hook无法正常初始化。类组件能运行是因为它只依赖全局React对象，而Hook对React实例的一致性要求更高。另外，React 17本身没有createRoot方法，这个是React 18的新特性，你改用ReactDOM.render是正确的。

两种可行解决方案 #

方案一：使用全局变量模式（推荐新手） #

如果已经通过Codepen的外部资源引入了React和ReactDOM的UMD格式CDN，直接使用全局变量即可，无需手动import：

const Clock = () => {
  // 直接使用全局React对象的useState方法
  const [value, setValue] = React.useState("Hello");
  // 渲染state的值，验证Hook是否工作
  return <h1>{value}</h1>;
};

const root = document.getElementById("root");
ReactDOM.render(<Clock />, root);

配套设置：

1. 在Codepen的「Settings > JavaScript」中，添加以下外部CDN链接：
   • React：https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js
   • ReactDOM：https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js
2. 确保预处理器选择Babel（JSX需要编译才能运行）。

方案二：使用ES模块模式 #

如果想保持import语法，需要确保同时导入React和ReactDOM，并且将脚本类型设置为module：

import React, { useState } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const Clock = () => {
  const [value, setValue] = useState("Hello");
  return <h1>{value}</h1>;
};

const root = document.getElementById("root");
ReactDOM.render(<Clock />, root);

配套设置：

1. 在Codepen的「Settings > JavaScript」中，将「JavaScript Preprocessor」设为Babel，「Type」设为Module。
2. 无需额外添加外部CDN链接，import语句已指定Skypack的资源。

关键注意点 #

• 不要混合使用全局变量和ES模块导入：比如只import React但用全局的ReactDOM，会导致两个不同的React实例，Hook必然失效。
• JSX必须通过Babel编译，Codepen中一定要开启Babel预处理器，否则JSX代码会直接报错。

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