解释
useState不是全局的，它是A)React对象的属性，B)react模块的命名导出.我建议改用模块，在这种情况下你可以做import { useState } from "react";.但如果你不想这样做，你可以用React.useState或const { useState } = React;，然后直接用useState.
使用模块:
import React, { useState } from "react";
const Example = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter((c) => c + 1);
return (
<div>
Count: {counter}{" "}
<input type="button" value="+" onClick={increment} />
</div>
);
};
实时副本(使用Babel独立版，这就是脚本标签具有特殊类型的原因；不要使用Babel独立版，使用Vite、Rollup或webpack等Bundle 包[或者，也不要使用JSX]):
<div id="root"></div>
<script type="text/babel" data-presets="es2017,react,stage-3" data-type="module">
import React, { useState } from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";
const Example = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter((c) => c + 1);
return (
<div>
Count: {counter}{" "}
<input type="button" value="+" onClick={increment} />
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);
</script>
<script src="https://unpkg.com/regenerator-runtime@0.13.2/runtime.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.10.3/babel.min.js"></script>
不使用模块:
const { useState } = React;
const Example = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter((c) => c + 1);
return (
<div>
Count: {counter}{" "}
<input type="button" value="+" onClick={increment} />
</div>
);
};
现场示例:
const { useState } = React;
const Example = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter((c) => c + 1);
return (
<div>
Count: {counter}{" "}
<input type="button" value="+" onClick={increment} />
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>