04 react中jsx语法展示数据_jsx直接展示参数-优快云博客

本文链接：https://blog.youkuaiyun.com/bin_2659017380/article/details/110742589

<!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>Document</title>
    <style>
    .orange{
        background: orange;
    }
    .blue{
        background: blue;
    }
    .bg{
        font-size: 50px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="root"></div>
    <!-- 引入react 用来创建虚拟dom的 -->
    <script src="./js/react.production.min.js"></script>
    <!-- 引入react-dom 用来渲染虚拟dom的 -->
    <script src="./js/react-dom.production.min.js"></script>
    <!-- 引入一个js库babel 将jsx可以转换成js的-->
    <!-- 3、js没有办法解析jsx 因此我们需要在引入一个js库 babel.min.js -->
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">

        // 1、获取根节点
        var root = document.getElementById('root') 

        // 数据
        var name='妲己'
        // var imgSrc='0.jpg'
        var info={
            imgSrc:'0.jpg',
            name:'张三',
            age:18,
            sex:'女'
        }
        // 2、创建虚拟DOM 
        // 数据绑定使用单花括号 { }
        // var obj =<div>{name}</div>

        // 在花括号使用字符串遵循js语法
        // var obj =<div>{"helle:"+name}</div>
        // img标签  所有的单标签必须有关闭标签
        // var obj=<img src={imgSrc}/>

        // 动态className
        var  classN='blue'

        // 动态样式
        var json={
            width:'300px',
            height:'100px',
            background:'red',
            fontSize:'30px',
            textAlign: 'center'
        }

        // 三目运算符
        var isOrange=false

        var  obj=(
            <div>
                <h3>姓名：{info.name}</h3>
                <h3>年龄：{info.age}</h3>
                <h3>性别：{info.sex}</h3>
                <h3>{"性别："+info.sex}</h3>
                <h3 className='orange'>2345678</h3>
                <h3 className={classN}>2345678</h3>
                <h3 className={isOrange?'orange bg':'blue bg'}>2345678</h3>
                <h3 style={json}>2345678</h3>
                <h3 style={{background:'pink',textAlign:center}}>2345678</h3>
            </div>
        )

        // 定义class 要用className

        ReactDOM.render(obj,root)        
    </script>
</body>

</html>

</html>