React基础语法04-循环数组渲染数据的方法
1：常规写法：数组里面放标签
list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是一个h2</h2>],
{this.state.list2}以上可知，只要把数组转换成以上格式，即可。
2：方法一
首先在this.state里面定义数组list: ['111', '222', '3333'],
写方法过滤，map循环遍历更改数组，返回一个li,把value放进去。
let listResult = this.state.list.map(function (value, key) {
return <li key={key}>{value}</li>
})再把定义的变量放到模板里面。
<ul>
{listResult}
</ul>3：方法二
在模板里面直接循环数据，数组里面写对象，首先把数组过滤一下，然后写代码：
{
this.state.list3.map(function (value, key) {
return (<li key={key}>{value.title}</li>);
})
}参考代码：Home.js
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
constructor() {
super();
//react定义数据
this.state = {
list: ['111', '222', '3333'],
list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是一个h2</h2>],
list3: [
{ title: "qqqqqqqq" },
{ title: "qqqqqqqqeqwrq" },
{ title: "qqqqrwrwrqqqq" },
{ title: "qqqqqrwrwqqq" }
]
}
}
render() {
let listResult = this.state.list.map(function (value, key) {
return <li key={key}>{value}</li>
})
return (
<div>
<ul>
{listResult}
</ul>
{this.state.list2}
<ul>
{
this.state.list3.map(function (value, key) {
return (<li key={key}>{value.title}</li>);
})
}
</ul>
</div>
)
}
}
export default Home;本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录