JSX及差值表达式单页面应用

Jason–json

于 2020-06-29 18:02:26 发布

阅读量144

点赞数

分类专栏： react 文章标签： jsx react

本文链接：https://blog.youkuaiyun.com/weixin_46146313/article/details/107025521

版权

react 专栏收录该内容

29 篇文章

订阅专栏

<!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>