React之jax语法

一.什么是jax？
概念：react定义的一种类似于xml的js拓展语法
作用：用来创建react的虚拟DOM对象的

二.jax基本语法
1.注释

 <script type="text/babel">
        let MyDom =<div>
            {/*注释方式*/}
            hello
            </div>
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

2.多行标签

 <script type="text/babel">
    //多行标签 需要一个父元素包裹 
    //最好在最外层填上一个括号
        let MyDom =（<div>
                <div>hello</div><div>nihao</div>
            </div>）
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

3.变量得使用

    <script type="text/babel">
    //创建一个变量
        let text ="微笑";
        //使用{变量名引用定义好的变量}
        let MyDom =<div>{text}</div>
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

变量计算

<script type="text/babel">
        let num =9527;
        //使用{变量名引用定义好的变量}
        let MyDom =(<div>
                <div>{num+1}</div>
            </div>);
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

4.函数

    <script type="text/babel">
		//定义一个函数
         function fun(obj) {
           //   return "姓名是:"+obj.name+"年龄是:"+obj.age
         //ES6得模板语法  `符号是tab键上面得键
            return `姓名是:${obj.name}年龄是：${obj.age}`
        }
        //创建一个对象
        let user={
            name:"小明",
            age:"18"
        }
        let MyDom =(<div>
        //{函数}引用当前函数
                <div>{fun(user)}</div>
            </div>);
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

5.三元运算符

    <script type="text/babel">
    let phone =4999;
        let MyDom =(<div>{phone>4000?"很贵":"很便宜"}</div>);
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

6.渲染数组

<script type="text/babel">
   
        var arr =[
            <p>新闻1</p>,
            <p>新闻2</p>,
            <p>新闻3</p>,
            <p>新闻4</p>,
            <p>新闻5</p>,
        ]

        let MyDom =(<div>
                        {arr}
                    </div>);
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

7.属性设置
超链接赋予网址

    <script type="text/babel">
        let text="百度一下";
        let url="https://www.baidu.com/";
        let MyDom =(
            <a href={url}>{text}</a>
        );
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

修改其标签颜色

 <script type="text/babel">
		//声明得必须是对象
        let color={color:"red"}
        let MyDom =(
            <p style={color}>变成红色</p>
        );
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>

也可以使用class样式来修改标签得颜色，但是要使用className代替class关键字

//设置样式
<style>
    .cssStyle{
        color:red;
    }
</style>
//省率部分代码
...
    <script type="text/babel">
        let MyDom =(
        //引入设定好的样式 class是js得关键字,在jax语法中使用className代替class
            <p className="cssStyle">变成红色</p>
        );
        ReactDOM.render(MyDom,document.getElementById("demoReact"))
    </script>
...