zoukankan      html  css  js  c++  java
  • react中map的应用

    当需要遍历数组时,特别是需要遍历多个数组时,我们就可以封装函数,从而提高代码的复用率,还要注意两点哦,1.数组的map可以进行遍历,需要加唯一的key值,2.封装成函数的话,记得内部需要加return关键字!

    <div id="app"></div>
    
    //当为多个数组时。
    var arr = ["a","b","c"]
    var arr2 = ["d","e","f"]
    
    	//封装函数
    	  function showList(arr){
                return arr.map((item,index)=>{
                    return <p key={index}>{item}</p>
                })
            }
            
        //调用封装的函数
        ReactDOM.render(<div>
                    {
                        showList(arr)
                    }
                    {
                        showList(arr2)
                    }
                </div>,document.getElementById("app"))
        
    

    return 后面返回一段jsx代码的时候,最好加(),为了避免问题

    react不是vue的那种双向数据绑定的框架,数据改变了,视图不会主动渲染。需要我们手动的去执行render函数!

    下面例题:要求是让第一项默认添加红色,后续点击每一项,每一项变红

    var arr = ["a","b","c"]
    var currentIndex = 0
    function showList(arr){
    	return(
    		<ul>
    			{
    				arr.map((item,index)=>{
    					return (
    						<li
    						key={index}
    						onClick = {()=>currentIndex=index;render()}
    						style = {{color:index===currentIndex?"red":""}}
    					)
    				})
    			}
    		</ul>
    	)
    }
    
    render()
    function render(){
    	ReactDOM.render(<div>
    		{showList(arr)}
    		</div>,document.getElementById("app")
    	)
    }
    
  • 相关阅读:
    GUID
    Castle学习笔记二:框架结构及配置
    Linux编程基础
    Linux文件编程
    单臂路由配置实例
    CCNA学习笔记#02第7章操作与配置Cisco IOS
    Linux基本命令
    Linux系统中rar、unrar命令安装和使用详解
    批处理设置IP与DNS服务器
    Linux下载安装5笔输入法
  • 原文地址:https://www.cnblogs.com/axingya/p/13591286.html
Copyright © 2011-2022 走看看