如何在codepen中使用React 18？

Question

我是 Codepen 新手。我正在完成 freecodecamp 挑战，他们给了我一个示例 codepen 链接。我在脚本中包含了

React

和

ReactDOM

的 CDN。

当我尝试编写

import {useState} from 'react'

时，它会用 skypack 导入替换它们。 然后，当我尝试运行

createRoot

函数时，它无法识别它。然后我尝试用

ReactDOM.Render

替换它，它似乎不理解

useState

钩子。

为什么会发生这种情况？当我制作类组件时，它工作得很好。这是因为兼容性问题吗？

这是代码-

import {useState} from "https://cdn.skypack.dev/[email protected]"

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

const root = document.getElementById('root');

ReactDOM.render(<Clock />, root)

Answer 1

我一直无法让它工作，但确实找到了一支使用 React 18 的笔，其中脚本是在 HTML 设置中导入的。当在JS导入区域使用相同的CDN链接时，它们不被接受。所以这适用于react 18，你可以使用钩子等

HTML：

<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="script.js" type="text/babel"></script> 

JS：

function App() {
  return(
  <h1>Hello World</h1>
    )
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

这里是 Codepen 中 React 18 工作模板的链接。
https://codepen.io/AdventureBear/pen/LYqwbwx

我通过 React 18 的 serachign codepen 发现了这一点，发现导入 React 18 时大多数都使用 React 17 渲染方法（它向后兼容）。这个使用了 HTML 脚本，这打败了 codepen 的一些魔力，但它确实有效！