React - 创建个评论列表组件

用React创建一个评论列表组件:

类似效果:

image.png

// components/commentList
import React from 'react'; // 创建组件，虚拟DOM，生命周期
import CommentDetail from '@/components/commentDetail'

const commentList = [
    {
        id: 1,
        user: '路飞',
        content: '吃肉'
    }, {
        id: 2,
        user: '索隆',
        content: '练剑'
    }, {
        id: 3,
        user: '香吉士',
        content: '做饭'
    }, {
        id: 4,
        user: '娜美',
        content: '爱财'
    }, {
        id: 5,
        user: '罗宾',
        content: '历史'
    }
];

export default class CommentList extends React.Component {
    constructor() {
        super()
        this.state = {
            commentList: commentList
        }
    }
    render() {
        return 

            
这是评论列表组件
            {this
                .state
                .commentList
                .map(item => {
                    return 
                })}
        
    }
}

// components/commentDetail
import React from 'react'; // 创建组件，虚拟DOM，生命周期

export default class CommentDetail extends React.Component {
    render() {
        return 

            
角色:{this.props.user}
            
特点:{this.props.content}
        
    }
}