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