zoukankan      html  css  js  c++  java
  • react-7 条件渲染与列表渲染

    条件渲染

    简介:

    在React中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。React中的条件渲染和JavaScript中的一样,使用JavaScript运算符if或者条件运算符去创建元素来表现当前的状态,然后让React根据它们来更新UI。

    例如:登录组件,登录前和登陆后渲染不同的组件

    通过if

    import React from "react"
    
    class IfRender extends React.Component {
        constructor() {
            super()
            this.state = { islogin: false }
        }
    
        render() {
         
                if(!this.state.islogin){
    
                    return(
                        <div>
                             <button onClick={this.login}>登陆</button>
                        </div>
                    )
                }else{
                    return(
                        <div>恭喜登陆</div>
                    )
                }
        }
    
        login=()=>{
            this.setState({islogin:!this.state.islogin})
        }
    }
    
    export default IfRender
    
    

    通过运算符&&

    核心因为在JavaScript中,true && expression总是会返回expression,而false &&expression总是会返回false,因此, 如果条件是true, &&右侧的元素就会被道染, 如果是false, React 会忽略并跳过它。

    原理:

    通过花括号包裹代码,你可以在JSX中嵌入任何表达式。这也包括JavaScript中的逻辑与(&&)运算符。它可以很方便地进行元素的条件渲染。

    示例:

    import React from "react"
    
    
    class AndRender extends React.Component {
        constructor() {
            super()
            this.state = { islogin: false }
        }
    
        render() {
            return(
                <div>
                   <button onClick={this.login}>登录</button>
                   {this.state.islogin&&<div>hello 周正</div>}
                </div>
            )
        }
        
        login=()=>{
            this.setState({islogin:!this.state.islogin})  //每次点击改变state里的值(取反)
        }
    }
    
    export default AndRender
    

    上面的案例中,点击按钮,可是实现每次点击的显示隐藏。

    条件渲染

    通过三目运算符进行判断。

    示例:

    
    // 使用三目运算符进行条件渲染
    
    import React from "react"
    
    
    class IsRender extends React.Component {
        constructor() {
            super()
            this.state = { islogin: false }
        }
    
        render() {
    
            const isLogin=this.state.islogin
    
            
            return(
          
    
                <div>
                   <button onClick={this.login}>登录</button>
                   {isLogin?(<p> 我己经登录了</p>):(<p>请先登录</p>)}
                
                </div>
            )
        }
        
        login=()=>{
            this.setState({islogin:!this.state.islogin})
        }
    }
    
    export default IsRender
    

    效果是点击按钮实现不同的渲染结果。

    列表渲染

    Map()处理数据和对象的数据

    进行列表渲染时,最常用到的是数组的map方法。

    map()是数组的一个方法,它创建一个新数组, 其结果是该数组中的每个元素都调用个提供的函数后返回的结果

    map()里面的处理函数接受两个参数,分别指代当前元素当前元素的索引

    注:map方法不会改变原数组。

    在进行列表渲染时,还会常用到Object.values()方法,该方法的作用是遍历对象的值,并返回一个数组,接下来便可以用map去遍历。

    map中的操作一般包括建立节点,并将数据填充到相应位置。最后将map的返回值使用{}包裹,放到render中的return中。(这里利用了jsx和数组的关系:数组在渲染时,会自动展开)

    key 值的设置

    key值的作用:

    Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。

    (其实就是在做diff算法时使用)

    因此你应当给数组中的每个元素赋予个确定的标,一个元素的key最好是这个元素在列表中拥有的一个独一 无的字符串。

    定义规则:

    通常,我们使用来自数据的id作为元素的key,当元素没有确定的id时,你可以使用他的序列号索引index作为key (若元素没有重排,该方法效果不错,但重排会使得其变慢。)

    :尽量不要用索引值作为key值。因为索引值不是固定的,可以用数据的id作为key(后台传过来的数据都会带有一个id,因为数据库有的数据都有一个唯一的id)

    深度解析key的必要性

    • Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识

    • 在开发过程中,我们需要保证某个元素的key在其同级元素中具有唯一 性。在React Diff算法中React会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。此外,React 还需要借助Key值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中Key的重要性。(这句话怎么理解?)

    综合练习:

    (1)react 封装ajax

    //使用ajax请求会菜品的数据,并在 页面系显示
    
    import React from "react" 
    
    class Ajax extends React.Component{
        constructor(){
            super()
            this.state={info:''}
        }
    
        componentDidMount(){
    
        }
    
        render(){
                let vegeCon=Object.values(this.state.info);
                 var trList= vegeCon.map((values)=>{
    
                    return(
                        <tr>
                            <td> {values.dage_coach}</td>
                            <td> {values.evaluate_coach}</td>
                            <td> {values.honor_coach}</td>
                            <td> {values.id_coach}</td>
                            <td> {values.name_coach}</td>
                            <td> {values.tage_coach}</td>
                            <td> {values.type_coach}</td>
                         </tr>
                    )
                })
                
    
            return(
                <div>
                    <button onClick={this.showData}>请求数据</button> {/*   //点便去服务器请求数据,并将请求的数据存放在state中 */}
                    <table>
                        <tbody>
                            {trList}
                        </tbody>
                    </table>
                </div>
            )
        }
    
        showData=()=>{  
            let xml=new XMLHttpRequest();
            xml.open("post", "http://www.qhdlink-student.top/student/coacha.php");
            xml.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xml.send("username=zyp&userpwd=123456&userclass=64&type=4")
            xml.onreadystatechange=()=>{
                if(xml.readyState === 4 && xml.status === 200){
                    this.setState({info: JSON.parse(xml.responseText) })
                }
            }
        }
    }
    
    export default Ajax
    

    (2)二级导航

    js

    import React from "react"  
    import "./decond.css"
    
    class SecondMenu extends React.Component{
        constructor(){
            super()
            this.state={info:''}
          
        }
    
        componentDidMount=()=>{
            this.showData()
        }
        render(){
         let con=this.state.info
    
        if(this.state.info!==""){  //第一次render的时候不用处理数据
    
          var  navlist= con.map((value)=>{
     
                    if(value.type==="0"){  //如果没有二级菜单
                     return(  <li key={value.id_m}> <a href={value.addr_m}> {value.title_m}</a>  </li>)  
                    }else{
                        return(
                            <li key={value.id_m}>
                                 <a href={value.addr_m}> {value.title_m}</a>
                                 <ul>
                                    { value.children_m.map((second,index)=>{
                                        return(
                                            <li key={index}><a href={second.addr_c}> {second.title_c}</a></li>
                                        )
                                    })}
                                 </ul>
                            </li>
                        )
                    }
                })
        }
    
        
        console.log(con)
    
            return(
                <div>
                    <ul id={"nav"}>
                        {navlist}
                    </ul>
                </div>
            )
        }
    
    
        showData=()=>{  
            let xml=new XMLHttpRequest();
            xml.open("post", "http://www.qhdlink-student.top/test/nav.php");
            xml.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xml.send("username=zyp&userpwd=123456&userclass=64&type=4")
            xml.onreadystatechange=()=>{
                if(xml.readyState === 4 && xml.status === 200){
                    // console.log(xml.responseText)
                    this.setState({info: JSON.parse(xml.responseText) })
                }
            }
        }
    }
    
    
    export default SecondMenu
    
    

    css

    * {
        box-sizing: border-box;
    }
    
    #nav {
         300px;
        margin: 0 auto;
        text-align: center;
    }
    
    #nav>li {
         100px;
        float: left;
        background-color: pink;
    }
    
    #nav>li ul {
        display: none;
        background-color: green;
    }
    
    #nav>li:hover ul {
        display: block;
    }
    
    生活是一首长长的歌!
  • 相关阅读:
    Win8系统 Python安装
    一些安卓开源框架整理
    Android 媒体键监听以及模拟媒体键盘的实现 demo
    android View 自动 GONE 问题
    Android 定时器TimerTask 简单使用
    关于Android studio 相对 eclipse 优点
    Java序列化与反序列化
    android shape的使用 边框
    Android Studio 修改 包名 package name
    Android WebView Long Press长按保存图片到手机
  • 原文地址:https://www.cnblogs.com/wind-zhou/p/14806342.html
Copyright © 2011-2022 走看看