react_02jsx核心语法(二)

(一)认识jsx的语法:

编译的两个条件:

• 有babel环境(babel.min.js)
• script 脚本添加type="text/babel"
  示例代码

const element=<h1>Hello,World</h1>

书写规范:

• 顶层只能有一个根元素,在外层包裹一个Div元素或者Fragment；
• 为了方便阅读在jsx的外层包裹一个小括号()，这样方便阅读，也可以进行换行书写；
• jsx可以是单标签也可以是双标签；单标签必须以/>结尾;

注释:

{/*注释写在这*/}

嵌入数据:

• 变量可以直接显示:String、Number、Array三种类型
• 变量为Boolean、null、undefined三种类型时不可直接显示，若需显示则需特殊处理
• 对象类型不能作为子元素(not valid as a React child)

class App extends React.Component{
            constructor(){
                super();
                this.state={
                    //1、在{}中可以正确显示
                    count:10, //Number
                    name:'Jane',// String
                    movies:['黑客帝国1','黑客帝国2','黑客帝国3'],//Array
                    
                    //2、在{}不能正确显示的
                    flag:true, //Boolean,只有它可以使用toSring()方法,
                    test1:undefined, //undefined
                    test2:null,//null
                    
                    //3、解决方法:有三种
                    test3:String(null),
                   //4、对象不能作为子类直接展示
                   person:{
                      name:"张三",
                      age:18   
                   }

                }
            }
            render(){
                return (
                    <div>
                        <h1>{this.state.count}</h1>
                        <h2>{this.state.name}</h2>
                        <h2>{this.state.movies}</h2>

                        <h2>{this.state.flag}</h2>
                        <h2>{this.state.test1}</h2>
                        <h2>{this.state.test2}</h2>
                        <hr/>
                        <h2>解决方法:</h2>
                        <h2>{this.state.test3}</h2>
                        <h2>{this.state.flag.toString()}</h2>
                        <h2>{this.state.test3+''}</h2>
                          {/*错误用法*/}
                        <h2>{this.state.person}</h2>
                    </div>
                )
            }
     }

支持表达式:

• 可以直接使用表达式
• 解构语法
• 函数引用

<script type="text/babel">
        class App extends React.Component{
            constructor(){
              super();
              this.state={
                message:'hello world',
                isLogin:true,
                firstName:'kobe',
                lastName:'kelly'
              }
            }
            render(){
              const {firstName,lastName,isLogin}=this.state;
              return(
                <div>
                    <h2>{this.state.message}</h2>
                    <h2>{firstName+" "+lastName}</h2>
                    <h2>{20*50}</h2>
                    <h2>{isLogin?"已登录":"未登录"}</h2>
                    <h2>{this.getFullName()}</h2>
                </div>
              ) 
            }
            getFullName(){
              //此处的this是不会有问题
              return this.state.firstName+" "+this.state.lastName+" xxx"
            }
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>