我尝试在没有 NPM 和其他工具的情况下使用 React，而是通过添加 CDN 链接来使用它，
但是如何导入依赖包，例如useState hook？如果它是通过另一个脚本标签添加的，那么它的 CDN 链接是什么？下面是我的代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Local</title>
<script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById('root')
const App = (props) => {
const [text, setText] = useState('hello');
return (
<div>
<h1>{text}</h1>
<input type="text" onClick={(e) => setText(e.target.value)}> </input>
</div>
);
}
ReactDOM.render(<App />, rootElement)
</script>
</body>
</html>
这里我会得到错误，useState没有定义。
注意：这只是为了使用直接添加到 html 文件中的 CDN 中的脚本来测试 React，尽管我知道 create-react-app 和现代工具
当您使用脚本时，React 在窗口对象上公开为React，你还使用了没有 hooks 的 React 版本（hooks 是在 16.8 中发布的）
将您的脚本更新为（您可能希望使用开发脚本以获得更好的错误消息）
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
如果您想访问useState解构它从React or use React.useState
另外，使用onChange代替onClick对于输入更改事件以及使用text状态值作为value输入的
<script type="text/babel">
const { useState } = React
const App = (props) => {
const [text, setText] = useState('hello');
return (
<div>
<h1>{text}</h1>
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
</div>
);
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
