首页 > 其他分享 >列表渲染

列表渲染

时间:2023-05-08 15:24:00浏览次数:29  
标签:map 渲染 newlist list 列表 item state var

import React from 'react'


export default class App extends React.Component {

    state={
        list:[1,2,3,4,5,6]
    }

    render() {
        var newlist=this.state.list.map(item=><li>{item}</li>)
        return (
            <div>
                {/* 写法一 */}
                <ul>
                {this.state.list.map(item=><li>{item}</li>)}
                </ul>

                 {/* 写法二 */}
                 <ul>
                     {newlist}
                </ul>
            </div>
        )
    }

  

}

// 原生js写法
// var list=[1,2,3]
// var newlist=list.map(item=>`<li>${item}</li>`)
// console.log(newlist.join(""))
// 输出 <li>1</li><li>2</li><li>3</li>

 

标签:map,渲染,newlist,list,列表,item,state,var
From: https://www.cnblogs.com/kaibindirver/p/17381857.html

相关文章

  • react + antd table列表自动滚动
    /***@file:table列表自动滚动,鼠标划入滚动暂停,鼠标划出滚动继续*/const[dataSource,setDataSource]=useState([])const[timer,setTimer]=useState()useEffect(()=>{if(dataSource.length){autoScroll(dataSource)}return()=>cl......
  • 列表的批量操作组件封装 + 权限 ,如何更优雅的实现呢?Vue3
    这个组件解决的问题?在以往的项目当中,我从未想过要对批量/列表数据的操作按钮做什么变动,直到最近的一次开发,让我突然觉得可以将操作按钮也做成一个公共组件,在做前端开发时,更加专注于js代码逻辑。如何使用?全局(main.js中)引用操作组件BatchOperation.vue创建页面操作按钮act......
  • 列表批量修改
    >>>dellst>>>lst=list('hellohowareyou')>>>lst['h','e','l','l','o','','h','o','w','a','r'......
  • 列表单元素访问,超索引报错
    >>>lst[1,2,3,(3,'hj'),9]>>>lst[3](3,'hj')>>>lst[4:4][]>>>lst[4:5][9]>>>lst[4:6][9]>>>lst[6:7][]>>>lst.insert(7,9)#7超过最大索引,不会真正插入在第八个位置,而是插入在尾......
  • POJ 动态规划题目列表
    声明:1.这份列表当然不是我原创的,从文库里下载了一份,放到这里便于自己浏览和查找题目。※最近更新:Poj斜率优化题目1180,2018,3709列表一:经典题目题号:容易:1018, 1050, 1083, 1088, 1125, 1143, 1157, 1163, 1178, 1179, 1189, 1191,1208, 1276, 1322, 1414, 1456, 1458......
  • 解决微信小程序"不在以下 request 合法域名列表中"
    如果在本地开发的状态下,我们本机的地址域名是没有配置在小程序后台的我们可以临时禁用掉这个检测看下面图示 ......
  • python中判断多个元素是否在列表中
    判断单个元素是否在列表中时可以通过in>>>'a'in['a','b','c']True但如果是多个元素,就不能通过in进行判断此时我们可以通过集合中的issubset和issuperset方法顾名思义,issubset是判断某集合是否是另外一个集合的子集,issuperset是判断某集合是否是另外一个集合的超集>>>......
  • 获取浏览器摄像头,麦克风列表
    获取navigator.mediaDevices.enumerateDevices().then(function(devices){devices.forEach(function(device){//audioinputvideoinput(视频)audiooutput(音频)console.log('设备3:'+device.kind+":"+devic......
  • django的web项目中重定向页面时的部分信息传输——以删除含有分页的列表记录为例
    问题:在管理系统界面往往是有分页的,初次编写列表的删除功能时很可能会出现删完之后页面跳转到第一页的问题,或者筛选完之后删除某一项结果删完之后跳转到未筛选页面。与实际分页管理的效果大庭相径。解决思路:1.起初只遇到了分页的情况,解决方法很简单,在删除按钮的href中直接传值,例......
  • 【Apache POI】Word文档转换HTML,多级列表自定义处理
    本文使用poi和xdocreport组件,在其基础自定义实现某些功能最近有个需求,文档的转换,需要把Word文档转换为编辑器可识别支持的HTML格式类型,Apache的开源组件poi可以解析docx和doc类型的文档,于是使用该组件实现需求关于Word文档的俩种格式,docx格式是一种压缩文件,由xml格......