前端学习（2236）：react的列表渲染二

import React from 'react';
import ReactDOM from 'react-dom';class Welcome extends React.Component {constructor(props) {super(props)this.state = {list: [{title: "第一节课",content: '时间'}, {title: "第一节课",content: '时间'}, {title: "第三节课",content: '时间'}, ]}}render() {/*  let listArr = [];for (let i = 0; i < this.state.list.length; i++) {let item = ( <li ><h3 > { this.state.list[i].title } </h3> <p > { this.state.list[i].content } </p> < /li >)listArr.push(item)} */let listArr = this.state.list.map((item, index) => {return ( <li key = "index" ><h3 > { index }: { item.title } </h3> <p > { item.content } < /p> < /li >)})console.log(listArr)return ( <div ><h1 >今天课程内容 </h1> <ul ><li > { listArr } <h3 >这是标题 </h3> <p > 内容 < /p> < /li > </ul> < /div > )}
}ReactDOM.render( < Welcome / > , document.querySelector("#root"))

运行结果

前端学习（2236）：react的列表渲染二相关推荐

【前端学习】React学习资料
React 是一种开源的 JavaScript 库,用于构建用户界面.它由 Facebook 开发并维护,已经成为了当今最流行的前端库之一.与其他框架不同,React 主要专注于视图层(View),旨 ...
React的列表渲染
//9. 列表渲染class List extends React.Component{state = {list:[1,2,3,4,5],list2:[{id:1,text:'java'},{id: ...
react中列表渲染的局部刷新
最近在写demo的时候遇到一个更新列表中某个的对象的某个值,最期待的结果肯定是局部刷新,但是我们往往在改变值之后会遇到全局都刷新的问题,以下为个人实验出来的一个小技巧. 首先我有以下数据需要通过rea ...
前端学习（2235）：react的列表渲染
import React from 'react'; import ReactDOM from 'react-dom';class Welcome extends React.Component {c ...
【前端学习】React学习笔记-事件、生命周期、虚拟DOMdiffing
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 React中的事件处理补充ref 上面的ref在React官网中提到不要被过度使用,在一些情况下可以使用其他方法来获取数据,比如 ...
前端学习之路---node.js（二）
知识点下一篇 vue(一) 网站开发模型 + 黑盒子.哑巴 + 写代码让它变得更智能 + 按照你设计好的套路供用户使 ...
前端学习之React篇-（1）最简React——Html直接引用React
当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法--就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简 ...
前端学习（176）:列表元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...

前端学习（2236）：react的列表渲染二

前端学习（2236）：react的列表渲染二相关推荐

最新文章

热门文章