React包的CDN链接，以及如何使用CDN的脚本导入它。
React包的CDN链接，以及如何使用CDN的脚本导入它。
提问于 2020-01-21 05:37:30
我试着在没有NPM和其他工具的情况下做出反应，而是通过添加CDN链接来使用它，但是如何导入依赖的包，例如useState挂钩？如果它是通过另一个脚本标记添加的，那么相同的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/react@16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/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是没有定义的。
注意:这只是使用CDN中直接添加到html文件中的脚本来测试app，尽管我知道create app和现代工具。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-21 07:40:37
当您使用脚本时，React将在窗口对象上公开为React，您还使用了一个没有钩子的版本(钩子是在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中解构它，或者使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59834741
复制相关文章
相似问题
腾讯云开发者
