React的列表渲染

//9. 列表渲染class List extends React.Component{state = {list:[1,2,3,4,5],list2:[{id:1,text:'java'},{id:2,text:'js'},{id:3,text:'php'},{id:4,text:'python'},{id:5,text:'node'}]}render(){const arr = this.state.list;const arr2 = this.state.list2;const listItem = []const listItem2 = []//map方式遍历arr.map((item)=>{let li = <li>{item}</li>;listItem.push(li);})//或for循环// for (let i = 0; i < arr.length; i++) {//     let li = <li>{arr[i]}</li>;//     listItem.push(li);// }for (let i = 0; i < arr2.length; i++) {let li = <li key={arr2[i].id}>{arr2[i].text}</li>;listItem2.push(li);}return <div><ul>{listItem}{listItem2}</ul></div>}}ReactDOM.render(<List />,document.getElementById('app'));
复制代码

React的列表渲染相关推荐

react中列表渲染的局部刷新
最近在写demo的时候遇到一个更新列表中某个的对象的某个值,最期待的结果肯定是局部刷新,但是我们往往在改变值之后会遇到全局都刷新的问题,以下为个人实验出来的一个小技巧. 首先我有以下数据需要通过rea ...
前端学习（2236）：react的列表渲染二
import React from 'react'; import ReactDOM from 'react-dom';class Welcome extends React.Component {c ...
前端学习（2235）：react的列表渲染
import React from 'react'; import ReactDOM from 'react-dom';class Welcome extends React.Component {c ...
react入门-列表渲染（动态获取数据）
注意:动态获取的是我自定义的后台数据,使用的时候请修改:componentDidMount中url 使用的数据如下: {"data": [{"author": ...
[react] react怎么提高列表渲染的性能？
[react] react怎么提高列表渲染的性能? 使用webpack 做代码分割. 使用hooks. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
React条件渲染列表渲染
一.React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容: 在vue中,我们会通过指令来控制:比如v-if.v-show: 在React中,所有的条件判 ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...
React实例练习-响应式设计、数据绑定、列表渲染、删除单项
服务菜单最好的学习就是在实战中成长,做一个<小姐姐服务菜单>应用,练习前面的知识和学习新知识新建小姐姐组件先在SRC的目录下面,新建一个文件Xiaojiejie.js 然后写一个基本 ...

React的列表渲染

React的列表渲染相关推荐

最新文章

热门文章