邂逅react(五)-jsx语法

时间 2020-06-15

标签邂逅 react jsx 语法栏目 React 繁體版

原文原文链接

今天继续更新jsx语法,欢迎各位小伙伴们阅读~~~
1、jsx属性绑定,如img的src属性,a标签的href属性,class属性,style内联样式属性等css

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举例react

<!--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.CreateElementthis

最后小结:
1.render中根节点具备惟一性
2.class属性应该写成className否则会报警告
3.style内联样式注意要以对象形式套在{}号中形如 {{属性名:属性值}}，属性名和属性值若是是字符串记得加引号
4.事件绑定方式绑定事件类型={事件名}，事件名前加this表示是当前对象调用
5.若是事件里面要调用当前类的state里面的属性记得将this指向当前对象
6.react事件中经常使用的改变this指向的几种方法:1.类继承 2.bind 3.箭头函数url