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> }