邂逅react(五)-jsx語法

今天繼續更新jsx語法,歡迎各位小夥伴們閱讀~~~
1、jsx屬性綁定,如img的src屬性,a標籤的href屬性,class屬性,style內聯樣式屬性等

class App extends React.Component{
        constructor(){
            super()
            this.state={
                url:'www.baidu.com',
                imgUrl:'./img/timg.jpg',
                title:'我是美食'
            }
        }
        render(){
            //解構賦值
           const {url,imgUrl,title}=this.state
            return (
                <div>
                <!--用{}包裹屬性-->
                  <a href={url}>百度一下你就知道</a>
                  <img src={imgUrl} title={title}/>
                  <!--style內聯樣式,
                  注意:1.屬性和屬性值要加引號,
                  屬性值要小駝峯式命名
                  2.樣式要以對象的形式寫在{}中-->
                  <h2 style={{'color':'red','fontSize':'30px'}}>hello react</h2>
                </div>
            );
        }
    }

    ReactDOM.render(<App/>,document.getElementById('root'))

2、react綁定事件,以<div>中onClick綁定listFn舉例

<!--1.事件命名規則:小駝峯式,2.事件寫在{}內-->
    <div onClick={listFn}><div/>

3、關於綁定this指向的幾種事件綁定方式

class App extends React.Component{
            constructor(){
                super()
                //類繼承方式改變this
                this.massage="經過類繼承類改變this"
                this.state={
                  msg:'bind event change this'
                }
            }
            render(){
                //解構賦值
               
                return (
                    <div>                      
                        {/*直接bind綁定*/}
                        <div onClick={this.eventFn1.bind(this)}>我是方式一</div>
                        {/*經過類繼承的方式*/}
                        <div onClick={this.eventFn2}>我是方式二</div>
                        {/*直接內部引用箭頭函數*/}
                        <div onClick={()=>{console.log('我是第三種方式')}}>我是方式三</div>
                    </div>
                );
            }

            eventFn1(){
                console.log(this.state.msg)
            }
            eventFn2=()=>{
                console.log(this)
                console.log(this.massage)
            }
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

4、(一)jsx條件渲染

//三元運算符控制元素狀態切換 &&運算符用法相似 暫不舉例
    class App extends React.Component{
            constructor(){
                super()
                
                this.state={
                  isLogin:true,//控制登陸狀態切換             
                }
            
            }
            render(){
               const {isLogin}=this.state//解構賦值

                
                return (
                    <div>   
                        {/*三元運算符*/}                                       
                       <div style={isLogin?{'display':'block'}:{'display':'none'}}>
                            <h1>歡迎回來</h1>
                            <button onClick={this.changePage.bind(this)}>{isLogin?'退出':'登陸'}</button>
                       </div>
                       <div style={isLogin?{'display':'none'}:{'display':'block'}}>
                            <h1>請登陸</h1>
                            <button onClick={this.changePage.bind(this)}>{isLogin?'退出':'登陸'}</button>
                       </div>
                      
                    </div>
                );
            }
            changePage(){
                this.setState({
                    isLogin:!this.state.isLogin
                })
            }
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

//條件語句控制元素狀態切換
    class App extends React.Component{
            constructor(){
                super()
                
                this.state={
                  isLogin:true,//控制登陸狀態切換             
                }
            
            }
            render(){
               const {isLogin}=this.state//解構賦值
               let msg=null
               let btnState=null
                if(isLogin){//根據登陸狀態判斷是否登陸
                //登陸顯示的內容
                    msg=<h1>歡迎回來</h1>
                    btnState=<button onClick={this.changePage.bind(this)}>退出</button>
                }else{
                    //沒登陸顯示的內容
                    msg=<h1>請登陸</h1>
                    btnState=<button onClick={this.changePage.bind(this)}>登陸</button>
                }
                
                return (
                    <div>   
                       {/*條件渲染*/}
                       {msg}
                       {btnState}

                    </div>
                );
            }
            changePage(){
                this.setState({
                    isLogin:!this.state.isLogin
                })
            }
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

//v-show 控制css樣式切換顯示隱藏
    class App extends React.Component{
            constructor(){
                super()
                
                this.state={
                  isLogin:true,//控制登陸狀態切換             
                }            
            }
            render(){
               const {isLogin}=this.state//解構賦值
                
                return (
                    <div>   
                       {/*v-show */}
                       <div style={isLogin?{'display':'block'}:{'display':'none'}}>
                            <div>歡迎回來</div>
                            <button onClick={this.changePage.bind(this)}>退出</button>
                       </div>
                       <div style={isLogin?{'display':'none'}:{'display':'block'}}>
                            <div>請登陸</div>
                            <button onClick={this.changePage.bind(this)}>登陸</button>
                       </div>
                      
                    </div>
                );
            }
            changePage(){
                this.setState({
                    isLogin:!this.state.isLogin
                })
            }
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

//列表渲染
    class App extends React.Component{
            constructor(){
                super()
                this.state={
                    arr:['尚漁味烤魚','炭火烤魚','探魚','江邊城外','小魚家烤魚']
                }
            }
            render(){
                //解構賦值
               const {arr}=this.state
                return (
                    <div>                      
                       {/*給每一個數組成員後面加個 真好吃*/}
                       <ul>
                            {//map是數組的高階函數 能夠將數組的成員一一映射成一個新數組
                                arr.map(item=>{
                                return <li key={item}>{item}真好吃~~~~~~~~</li>
                                })
                            }
                       </ul>
                       
                    </div>
                );
            }

           
        }

        ReactDOM.render(<App/>,document.getElementById('root'))

jsx是React.CreateElement(Component,props...,Child)的語法糖
React.CreateElement須要傳入三個參數，type、config、children
源碼中的React.CreateElement

最後小結:
1.render中根節點具備惟一性
2.class屬性應該寫成className否則會報警告
3.style內聯樣式 注意要以對象形式套在{}號中 形如 {{屬性名:屬性值}}，屬性名和屬性值若是是字符串記得加引號
4.事件綁定方式 綁定事件類型={事件名}，事件名前加this表示是當前對象調用
5.若是事件裏面要調用當前類的state裏面的屬性記得將this指向當前對象
6.react事件中經常使用的改變this指向的幾種方法:1.類繼承 2.bind 3.箭頭函數