SOURCE

class Item extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <li className="item">
                <p className="title">{this.props.user}</p>
                <p className="content">{this.props.content}</p>
            </li>
        )
    }
}
class Commet extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            CommentList: [
                { user: '张三', content: '哈哈，沙发' },
                { user: '张三2', content: '哈哈，板凳' },
                { user: '张三3', content: '哈哈，凉席' },
                { user: '张三4', content: '哈哈，砖头' },
                { user: '张三5', content: '哈哈，楼下山炮' }
            ]
        }
    }
    renderList() {
        return this.state.CommentList.map((item, index) => {
            return (
                <Item {...item} key={item.user} />
            )
        })
    }
    render() {
        var style = { background: 'red', textAlign: 'center' };
        return (
            <React.Fragment>
                <div style={style} className="title">评论组件标题</div>
                <ul style={style}>
                    {this.renderList()}
                </ul>
            </React.Fragment>
        )
    }
}
ReactDOM.render(<Commet></Commet>, document.getElementById('app'))

<div id="app"></div>