前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React基础语法04-循环数组渲染数据的方法

React基础语法04-循环数组渲染数据的方法

作者头像
王小婷
发布2019-11-10 23:46:51
3.1K0
发布2019-11-10 23:46:51
举报
文章被收录于专栏:编程微刊

1:常规写法:数组里面放标签

代码语言:javascript
复制
list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是一个h2</h2>],
{this.state.list2}

以上可知,只要把数组转换成以上格式,即可。

2:方法一

首先在this.state里面定义数组list: ['111', '222', '3333'], 写方法过滤,map循环遍历更改数组,返回一个li,把value放进去。

代码语言:javascript
复制
let listResult = this.state.list.map(function (value, key) {
return <li key={key}>{value}</li>
})

再把定义的变量放到模板里面。

代码语言:javascript
复制
<ul>
{listResult}
</ul>

3:方法二

在模板里面直接循环数据,数组里面写对象,首先把数组过滤一下,然后写代码:

代码语言:javascript
复制
{
this.state.list3.map(function (value, key) {
return (<li key={key}>{value.title}</li>);
})
}

参考代码:Home.js

代码语言:javascript
复制
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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1:常规写法:数组里面放标签
  • 2:方法一
  • 3:方法二
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档