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;