react表达式

最新推荐文章于 2024-07-29 11:53:27 发布

渭东流

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量58

点赞数

文章标签： javascript ecmascript react react.js

本文链接：https://blog.csdn.net/wedongliu/article/details/131382811

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root1"></div>
<script type="text/babel">
    /*
    JSX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中，这样你就可以从你的代码中嵌入一些变量并展示给用户
    一个表达式会产生一个值，可以放在任何一个需要值的地方
    表达是主要包括：1. 字符串、数值、布尔值、null、undefined、object
                 2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
                 3. fn()
    */
    let sum=(a,b)=>{
        return a+b
    }
    const user = {
        "name":"小明",
        "age":18,
        "dept":"销售部"
    }
    let flag = true
    function MyHd(){
        return (
            <div>
                {/*字符串*/}
                <h1>字符串：{"一级标题"}</h1>
                {/*函数*/}
                <p>函数：{sum(1,2)}</p>
                {/*JSON*/}
                <ul>
                    <li>姓名：{user.name}</li>
                    <li>年龄：{user.age}</li>
                    <li>部门：{user.dept}</li>
                </ul>
                <p>{2+3}</p>
                {/*三目运算*/}
                <p>{flag?"已读":"未读"}</p>
            </div>
        )
    }
    ReactDOM.render(<MyHd/>,document.getElementById("root1"))
</script>
</body>
</html>