学习目标
-
列表渲染
第一种：将列表内容拼装成数组放置到模板中。
第二种：将数据拼装成数组的JSX对象。
实例一 手动创建列表
import React from 'react';
import ReactDOM from 'react-dom';
let arr = ["小明", "小黑", "小白"];
let arrHTML = [<li>小明</li>,<li>小黑</li>,<li>小白</li>];
class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<ul>
{arr}
{arrHTML}
</ul>
</div>
)
}
}
ReactDOM.render(
<Welcome />, // 渲染父元素
document.querySelector('#root') //寻找文件对象
)
实例二 for循环创建列表
import React from 'react';
import ReactDOM from 'react-dom';
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title:"first class",
desc: "Chinese"
},
{
title:"second class",
desc: "Math"
},
{
title:"third class",
desc: "English"
}
]
}
}
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].desc}</p>
</li>
)
listArr.push(item)
}
return (
<div>
<h1>Today's classes</h1>
<ul>
{listArr}
</ul>
</div>
)
}
}
ReactDOM.render(
<Welcome />, // 渲染父元素
document.querySelector('#root') //寻找文件对象
)
实例三 map遍历
使用数组的map方法，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，然后将数组渲染到模板中。Key值需要放置到每一项中。
import React from 'react';
import ReactDOM from 'react-dom';
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title:"first class",
desc: "Chinese"
},
{
title:"second class",
desc: "Math"
},
{
title:"third class",
desc: "English"
}
]
}
}
render() {
let listArr = this.state.list.map((item, index) => {
return (
<li key={index}>
<h3>{index}:{item.title}</h3>
<p>{index}:{item.desc}</p>
</li>
)
})
return (
<div>
<h1>Today's classes</h1>
<ul>
{listArr}
</ul>
</div>
)
}
}
ReactDOM.render(
<Welcome />, // 渲染父元素
document.querySelector('#root') //寻找文件对象
)
实例四 通过函数组件+map渲染（静态渲染）
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
return (
<li>
<h3>{props.index}:{props.data.title}</h3>
<p>{props.index}:{props.data.desc}</p>
</li>
)
}
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title:"first class",
desc: "Chinese"
},
{
title:"second class",
desc: "Math"
},
{
title:"third class",
desc: "English"
}
]
}
}
render() {
let listArr = this.state.list.map((item, index) => {
return (
<ListItem key={index} data={item} index={index}/>
)
})
return (
<div>
<h1>Today's classes</h1>
<ul>
{listArr}
</ul>
</div>
)
}
}
ReactDOM.render(
<Welcome />, // 渲染父元素
document.querySelector('#root') //寻找文件对象
)
实例五 通过类组件+map渲染（动态渲染）
import React from 'react';
import ReactDOM from 'react-dom';
class ListItem extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<li onClick={(event) => {this.clickEvent(
this.props.index,
this.props.data.title,
event
)}}>
<h3>{this.props.index}:{this.props.data.title}</h3>
<p>{this.props.index}:{this.props.data.desc}</p>
</li>
)
}
clickEvent=(index, title, event) => {
alert((index+1)+"-"+title)
}
}
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title:"first class",
desc: "Chinese"
},
{
title:"second class",
desc: "Math"
},
{
title:"third class",
desc: "English"
}
]
}
}
render() {
let listArr = this.state.list.map((item, index) => {
return (
<ListItem key={index} data={item} index={index}/>
)
})
return (
<div>
<h1>Today's classes</h1>
<ul>
{listArr}
</ul>
</div>
)
}
}
ReactDOM.render(
<Welcome />, // 渲染父元素
document.querySelector('#root') //寻找文件对象
)
实例六 不使用组件，仅用map渲染
import React from 'react';
import ReactDOM from 'react-dom';
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title:"first class",
desc: "Chinese"
},
{
title:"second class",
desc: "Math"
},
{
title:"third class",
desc: "English"
}
]
}
}
render() {
return (
<div>
<h1>Today's classes</h1>
<ul>
{
this.state.list.map((item, index) => {
return (
<li key={index} onClick={(e) => {this.clickEvent(
index,
item.title,
e
)}}>
<h3>{index+1}-{item.title}</h3>
<p>{item.desc}</p>
</li>
)
})
}
</ul>
</div>
)
}
clickEvent=(index, title, event) => {
alert((index+1)+"-"+title)
}
}
ReactDOM.render(
<Welcome />, // 渲染父元素
document.querySelector('#root') //寻找文件对象
)实例七 新病例数量
import React from 'react';
import ReactDOM from 'react-dom';
import jsonData from './feiyan.json'
import './test.css'
let provincesObj = {}
jsonData.data.list.forEach((item, i) => {
if (provincesObj[item.province] === undefined) {
provincesObj[item.province] = {
confirm:0,
suspect:0,
heal:0,
dead:0
}
}
item.confirm = item.confirm ? item.confirm:0;
item.suspect = item.suspect ? item.suspect:0;
item.heal = item.heal ? item.heal:0;
item.dead = item.dead ? item.dead:0;
provincesObj[item.province] = {
confirm: provincesObj[item.province].confirm + item.confirm,
suspect: provincesObj[item.province].suspect + item.suspect,
heal: provincesObj[item.province].heal + item.heal,
dead: provincesObj[item.province].dead + item.dead
}
})
let provinceList = []
for (const key in provincesObj) {
provincesObj[key].province = key;
provinceList.push(provincesObj[key])
}
let provinceListSort = provinceList.sort((a, b) => {
if (a.confirm < b.confirm) {
return 1;
} else {
return -1;
}
})
class Bili extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>中國病例</h1>
<ul>
<li>
<span>地区</span>
<span>确诊</span>
<span>死亡</span>
<span>治愈</span>
</li>
{
this.props.list.map((item, index) => {
return (
<li key={index}>
<span>{item.province}</span>
<span>{item.confirm}</span>
<span>{item.dead}</span>
<span>{item.heal}</span>
</li>
)
})
}
</ul>
</div>
)
}
}
ReactDOM.render(
<Bili list={provinceListSort}/>,
document.querySelector('#root')
)- test.css
ul,li {
list-style: none;
margin: 0;
padding: 5px 5px;
}
li {
display: flex;
}
span {
flex:1;
}
li:nth-child(odd) {
background-color: #efefef;
}