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

list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是一个h2</h2>],
{this.state.list2}

let listResult = this.state.list.map(function (value, key) {
return <li key={key}>{value}</li>
})

<ul>
{listResult}
</ul>

{
this.state.list3.map(function (value, key) {
return (<li key={key}>{value.title}</li>);
})
}

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;