ReactJS实现一个简单的评论列表

class CmtList extends React.Component {
    constructor() {
        super();
        this.state = {
            CommentList: [
                {id:1, user: 'sss', content: 'java'},
                {id:2, user: 'sss', content: 'java'},
                {id:3, user: 'sss', content: 'java'},
                {id:4, user: 'sss', content: 'java'},
            ]
        }
    }

    render() {
        return <div>
            <h1> 这是评论列表组件 </h1>
            {this.state.CommentList.map(item => <div>{item.user}</div>)}
        </div>
    }
}

ReactDOM.render(<div>
    <CmtList>
    </CmtList>
</div>, document.getElementById('example'));

仔细观察，item 里的字段都来自外界，并非该组件，所以定义成无状态的 function 最好。

function CmtItem(props) {
    return <div key={props.user}>
        <h1>评论人：{props.user}</h1>
        <p>评论内容：{props.content}</p>
    </div>
}

这么使用 render 函数

render() {
    return <div>
        <h1> 这是评论列表组件 </h1>
        {this.state.CommentList.map(item => <CmtItem {...item}></CmtItem>)}
    </div>
}