<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 其他局部使用的时候也需要引入 -->
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 各种数据的差值状态
let str = "天气还好" //字符串 原样输出
// let data = 1 //数字 原样输出
// let data = true/false //布尔 是否输出
// let data = null //不输出
// let data = undefined //不输出
// let data = ["内容1","内容2"] //原样输出,去掉,号 []
let data = { //对象 点语法
name:"白休息",
age:18
}
ReactDOM.render(
<header>
<h1>nihao {str}{data.name}</h1>
<h1>大保健</h1>
</header>,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
</body>
</html>
JSX及差值表达式单页面应用
最新推荐文章于 2024-07-02 17:59:10 发布