我曾尝试过不带NPM和其他工具的React,而是通过添加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未定义。注意:这只是使用直接添加到html文件中的CDN脚本来测试React,尽管我知道create-react-app和现代工具
[使用脚本时,React在窗口对象上显示为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>