评论列表案例-创建 CmtList 组件并渲染基本页面结构|学习笔记

开发者学堂课程【React 入门与实战：评论列表案例-创建 CmtList 组件并渲染基本页面结构】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/585/detail/8105

评论列表案例-创建 CmtList 组件并渲染基本页面结构

一、渲染评论列表

这是评论列表

里面的评论项都是用 for 循环创建出来的。

最外层定义为大组件叫做评论列表组件，里面每一个评论项叫做评论项组件。这样就有了两个组件：父组件，子组件。评论项所对应的数据放在父组件，作为私有数据。

二、通过 for 循环生成多个组件

1. 数据：

commentlist: [

{ id: 1, user:‘张三", content:‘哈哈，沙发’},

{ id: 2, user:‘李四",content:‘哈哈，板凳’},

{ id : 3, user: ‘王五', content:‘哈哈，凉席’},

{ id: 4,user:‘赵六',content:‘哈哈，砖头’}，

{ id: 5, user:‘田七', content:‘哈哈，楼下山炮”}

]

第一步，创建父组件，有两种方式：创建成 class 有状态组件；普通的 function 无状态组件。数据在这里是写死的，在企业中是通过 ajax 拿到的，所以要用有状态的组件。

//使用 class 关键字，定义父组件

class CmtList extends React.Component{

constructor(){

super()

this.state = { }

}

render( ){

return <div>

111   

//这里创建 div 标签的作用是占位

此时执行效果如下：

<div>

<h1>这是评论列表组件<h1>

</div>

}

}

这样评论列表组件就有了，然后将数据写入 state

ComentList：[       //评论列表数据

{ id: 1， user:'张三', content: ‘哈哈，沙发’}，

{ id: 2,user: ‘李四',content:‘哈哈，板凳’}，

{ id: 3,user: '王五', content:‘哈哈，凉席’}，

{ id: 4, user:‘赵六',content:‘哈哈，砖头’}，

{ id: 5,user:‘田七', content:‘哈哈，楼下山炮’}

]

循环 ComentList 的每一项才能在页面上创建对应的 UI 元素，所以：

{this.state.CommentList.map(item => <div>{item.user}</div>)}

.map：对数组每一项进行操作并返回新数组

第一次循环完出现的是第一条数据包装成 div 放到数组里，其他数据同理。当整个循环完成后得到新数组，里面包含五个 div 里面包含每个名字。

运行提示缺少 Key，所以在 div 后加上：

key={item.id

这时候只有名字所以要把结构完善：

将div里放入子元素

{this.state.CommentList.map(item => <div key={item. id}>

<h1>评论人: {item.user}</h1>

<p>评论内容:{item.contentl</p>

</div)}

循环了 ComentList 组件上的私有数据，由于数据是一个数组，直接调用数组的 .map 函数，对数组每一项进行操作并且把返回的结果当作一个新数组，最终把新数组放到页面上。