react_03jsx核心语法(三)

绑定属性:

• 在state中定义的变量可以用来绑定在标签的普通属性、class名、style
• 在标签属性中也可以用使用函数或者其它表达式
• 部分类名不能用js里面的，比如class因为这与关键字冲突

<div id="app">app</div>
    <script type="text/babel">
        class App extends React.Component{
            constructor(){
              super();
              this.state={
                message:'hello world',
                imgUrl:'http://p2.music.126.net/qb2gBjmC9-PYt-n5QFAsjw==/109951165781454309.jpg',
                link:"https://www.baidu.com",
                active:true,
                myfontSize:"30px"
              }
            }
            render(){
              const {imgUrl,active}=this.state;
              return(
                <div>
                    {/* 1、绑定普通属性*/}
                    <h2 title={this.state.message}>{this.state.message}</h2>
                     <h2>{this.getSizeImg(imgUrl,140)}</h2>
                     <img src={formateImg(imgUrl,140)} alt=""/>
                     <a href={this.state.link} target="_black">点击</a>
                    
                     {/* 2、绑定class*/}
                     <div className="title head">div1元素</div>
                     {/*和上面的是把字符串赋值，下面的是给了表达式，里面放的字符串,二者等价*/}
                     <div className={"title head"}>div2元素</div>
                     <div className={"title head"+(active?" active":"")}>div3元素</div>

                      {/* 3、绑定style  格式最外层{}表示使用语法,里面包含对象{key:value},value最好是用""，不然的话就是变量引用上面定义*/}
                      <div style={{color:"red",fontSize:this.state.myfontSize} }>测试绑定style</div>
                </div>
              ) 
            }
            getSizeImg(url,size){
              return url+`?param=${size}y${size}`;
            }       
        }
       function formateImg(url,size) {
          return url+`?param=${size}y${size}`;
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>

绑定事件:

• 直接函数显示绑定
• 使用箭头函数方式来定义函数
• 在事件调用中直接传入箭头函数，然后在箭头函数的函数体中调用需要执行的方法(推荐)
• 可以传参，也可以传原生的event事件

<script type="text/babel">
        class App extends React.Component{
            constructor(){
              super();
              this.state={
                  counter:100
              }
              this.BtnClick=this.BtnClick.bind(this);
            }
            render(){
              return(
                <React.Fragment>
                  <h2>{this.state.counter}</h2>
                  {/*1、方案一：直接函数显示绑定this*/}
                  <button onClick={this.BtnClick}>+1</button>
                  
                  {/*2、方案二：定义函数时候使用箭头函数方式*/}
                  <button onClick={this.Increatement}>+1</button>

                  {/*3、方案三（推荐）：直接传入一个箭头函数，在箭头函数中调用需要执行的函数*/}
                  <button className="test" onClick={ (e)=>{ 
                      //在这个函数体中可以执行任何代码，包括调用其它函数
                      this.Decreatement("hello",e)
                    }}>-1</button>
                </React.Fragment>
              ) 
            }
            BtnClick(){
                console.log(this.state.counter++)
            }
            //箭头函数中不绑定this，会向上层自动寻找this
            Increatement=()=>{
              console.log(this.state.counter++)
            }  
            Decreatement(value,event){
              console.log(value)
              console.log(event)
              console.log(this.state.counter--)
            }  
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>

条件判断:

• if用于条件渲染
• 三元运算符条件判断
• 逻辑与条件判断

<script type="text/babel">
        class App extends React.Component{
            constructor(){
              super();
              this.state={
                  isLogin:true
              }
            }
            render(){
             const {isLogin}=this.state
              let message=null
              {/*方案一:if条件判断 适合条件比较复杂的情况*/}
              if(isLogin){
                message="欢迎回来"
              }
              else{
                message="请先登录"
              }
              return(
                <React.Fragment>
                    <h2>{message}</h2>
                     {/*方案二:三元运算符条件判断*/}
                    <button onClick={(e)=>{this.loginClick()}}>{isLogin?"退出":"登录"}</button>
                   {/*参数只有一个e,可以省略括号，当箭头函数函数体只有一行代码也可以省略成下面这样*/}  
                    <button onClick={e=>this.loginClick()}>{isLogin?"退出2":"登录2"}</button>

                     {/*方案三:逻辑与 应用在啥也不显示的情况下*/}
                    <p>{isLogin?"现在已经登录了":null}</p>
                    <p>{isLogin&&"现在已经登录了"}</p>
                </React.Fragment>
              ) 
            }
            loginClick(){
              this.setState({
                isLogin:!this.state.isLogin
              })
            } 
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>

条件渲染类似vue中v-show:

• 通过设置样式的display属性来实现

<script type="text/babel">
     class App extends React.Component{
            constructor(){
                super();
                this.state={
                   isLogin:true
                }
            }
            render(){
                const {isLogin}=this.state
                return (
                    <div>
                       <h2>类似vue中v-show效果</h2>
                        <button onClick={e=>this.loginClick()}>{isLogin?"退出":"登录"}</button>
                        <h1 style={{display:(isLogin?"block":"none")}}>已经登录</h1>
                    </div>
                )
            }
            loginClick() {
                this.setState({
                    isLogin:!this.state.isLogin
                })
            }
     }
     ReactDOM.render(<App/>,document.getElementById('app'))
</script>

列表渲染:

• 使用高级函数map来实现
• 可以用filter、slice等函数预先处理数据
• 代码中暂时先忽略key值的问题

<script type="text/babel">
        class App extends React.Component{
            constructor(){
              super();
              this.state={
                names:["aa","bb","cc","dd","ee"],
                numbers:[11,22,33,44,55,66],
                movies:["电影一","电影二","电影三","电影四","电影五","电影六"]
              }
            }
            render(){
              return(
                <React.Fragment>
                     <h2>1、普通列表展示:</h2>
                     <ul>
                      {/*
                         只能用map,不能用foreach
                         {
                          this.state.names.map((item,index,array)=>{
                            return <li>111</li>
                          },this)
                        }
                      */}
                       {
                         this.state.names.map(item=>{
                          return <li>{item}</li>
                         })
                       }
                       <hr/>
                       <h2>2、filter列表展示:</h2>
                        {/*
                            a、filter返回一个新的数组 
                            b、fliter()的第一个回调参数函数必须返回一个布尔值,item满足条件就放入新数组中
                        */}
                       <ul>
                        {/*
                        {
                          this.state.numbers.filter((item,index,array)=>{
                           return item>22
                         }).map(item=>{
                            return <li>{item}</li>
                         })
                        }
                        */}
                         {/*简化写法:可读性差*/}
                        {
                          this.state.numbers.filter(item=>item>33).map(item=><li>{item}</li>)
                        }
                      </ul>
                       <hr/>
                       <h2> 3、slice列表展示:</h2>
                        <ul>
                          {/*
                          {
                            this.state.movies.slice(1,4).map(item=>{
                              return <li>{item}</li>
                            })
                          }  
                           */}
                           {
                             this.state.movies.slice(0,4).map(item=><li>{item}</li>)
                           }
                        </ul>
                     </ul>
                </React.Fragment>
              ) 
            }
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>