react-7 条件渲染与列表渲染

2024-01-26 11:34:40

条件渲染

简介：

在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）二级导航

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 {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

#nav>li {
    width: 100px;
    float: left;
    background-color: pink;
}

#nav>li ul {
    display: none;
    background-color: green;
}

#nav>li:hover ul {
    display: block;
}

码农公寓

条件渲染

通过if

通过运算符&&

条件渲染

列表渲染

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

key 值的设置

key值的作用：

定义规则：

深度解析key的必要性

综合练习：

（1）react 封装ajax

（2）二级导航

相关文章