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

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

function ListItem(props) {
    return ( <
        li key = { props.index } >
        <
        h3 > { props.index + 1 }: { props.data.title } < /h3> <
        p > { props.data.content } < /p> < /
        li >
    )
}

class ListItem2 extends React.Component2 {
    constructor(props) {
        super(props)


    }
}

class Welcome extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [{
                title: "第一节课",
                content: '时间'
            }, {
                title: "第一节课",
                content: '时间'
            }, {
                title: "第三节课",
                content: '时间'
            }]
        }
        render() {
            return ( <
                li onClick = {
                    (e) => { this.clickEvent(this.props, this.props.data.title, event) }
                } >
                <
                h3 > { this.props.index + 1 }: listItem: { this.props.data.title } < /h3> <
                p > { this.props.data.content } < /p> < /
                li >
            )
        }

    }
    clickEvent = (index, title, event) => {
        alert(index + "-" + title)
    }
}
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 ( <
            ListItem2 key = { index }
            data = { item }
            index = { index } < /ListItem>
        )
    })
    console.log(listArr)
    return ( <
        div >
        <
        h1 >
        今天课程内容 <
        /h1> <
        ul >
        <
        li > { listArr } <
        h3 >
        这是标题 <
        /h3> <
        p > 内容 < /p> < /
        li > <
        /ul> < /
        div > )
}
}

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