<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数式组件绑定事件.html</title>
// 第一步: 引入开发版本的react
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
// 第二步:挂载节点
<div id="app">
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel">
function go() {
console.log("gogogo")
}
// 函数式组件注册
let item = () => {
return (
<div className="item">
<button onClick={ go }>点击一下</button>
<button onClick={ go() }>点击一下</button> {/* react中绑定的事件函数不能加括号,加括号后会被自动执行 */}
<hr/>
</div>
)
}
// console.log(item) // item是个函数,所以渲染是要调用这个函数,不然会报错
// 渲染模版
ReactDOM.render(item(), document.getElementById("app"))
</script>
</html>
react的jsx语法
最新推荐文章于 2023-01-22 20:49:05 发布