用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 <div className="commentList">
<h1>这是评论列表组件</h1>
{this
.state
.commentList
.map(item => {
return <CommentDetail key={item.id} {...item} />
})}
</div>
}
}
// components/commentDetail
import React from 'react'; // 创建组件，虚拟DOM，生命周期
export default class CommentDetail extends React.Component {
render() {
return <div>
<h1>角色:{this.props.user}</h1>
<p>特点:{this.props.content}</p>
</div>
}
}
