React jsx语法基本使用（day3）

jsx语法基本使用

• 引用外部jsx.js

<script src="jsx.js" type="text/babel"></script>

• jsx中注释方式

let myDom = <h1>
      {/*我是需要注释的内容*/}
                hello，world
                </h1>

• jsx中多行标签的创建

//多行标签需要一个父元素包裹
    let myDom = <div>
                  <div>我是第一个内容</div>
                  <div>我是第二个内容</div>
                </div>

• 使用表达式把变量渲染到dom中 {变量}

      let text = "你好";
      let num = "9416";
      let user = {
          name:"小明",
          age:18
      }
      function fun(obj){  
        //return "姓名是："+obj.name+"---年龄是："+obj.age;
        return `姓名是:${obj.name}---年龄是:${obj.age}`;//ES6表达式
      }
      let myDom = (<div>
                    	<div>{text}</div>
                    	<div>{num}</div>
                   		<div>{num+1}</div> {/*num+1*/}
                   		<div>{fun(user)}--{user.age>=18?"已成年":"未成年"}</div>{/*使用函数返回渲染+三目运算使用*/}
                   </div>
      )
      ReactDOM.render(myDom, document.getElementById("demoReact"));//获取节点，并渲染

• 渲染数组

 var arr = [
        <p>我是数组下标0</p>,
        <p>我是数组下标1</p>,
        <p>我是数组下标2</p>,
        <p>我是数组下标3</p>,
        <p>我是数组下标4</p>
      ]
      let myDom = (
          <div>
            {arr}
          </div>
      )
      ReactDOM.render(myDom, document.getElementById("demoReact"));

渲染效果图

• 属性设置

1.超链接属性

     //属性设置
      let text="点击我去百度";
      let linkUrl="http://www.baidu.com";
      let myDom =<a href={linkUrl}>{text}</a>
      ReactDOM.render(myDom, document.getElementById("demoReact"));

2.内联样式属性设置

 //设置内联属性改变样式
      let myStyle = {color:"red",backgroundColor:"pink"}
      let myDom = <p style={myStyle}>改变样式</p>
      ReactDOM.render(myDom, document.getElementById("demoReact"));

3.使用className来控制样式

<style>
      .mystyle{
        color:red;
        background-color:seashell;
      }
    </style>

//注意在jsx中不能是用Class属性。应为class是js的关键字。在jsx中使用className来代替class
      let myDom = <p className="mystyle">改变样式</p>
      ReactDOM.render(myDom, document.getElementById("demoReact"));