前端学习（2236）：react的列表渲染二

import React from 'react';
import ReactDOM from 'react-dom';

class Welcome extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [{
                title: "第一节课",
                content: '时间'
            }, {
                title: "第一节课",
                content: '时间'
            }, {
                title: "第三节课",
                content: '时间'
            }, ]
        }

    }
    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].content } <
                 /p> < /
                 li >
             )
             listArr.push(item)
         } */
        let listArr = this.state.list.map((item, index) => {
            return ( <
                li key = "index" >
                <
                h3 > { index }: { item.title } <
                /h3> <
                p > { item.content } < /p> < /
                li >
            )
        })
        console.log(listArr)
        return ( <
            div >
            <
            h1 >
            今天课程内容 <
            /h1> <
            ul >
            <
            li > { listArr } <
            h3 >
            这是标题 <
            /h3> <
            p > 内容 < /p> < /
            li > <
            /ul> < /
            div > )
    }
}

ReactDOM.render( < Welcome / > , document.querySelector("#root"))

运行结果