# 评论列表组件 巩固有状态组件和无状态组件的使用，实现评论列表开发，实现如下效果。  ## 结构 `div.title{评论组件标题}+ul>li.item>(p.title+p.content)` ## 数据 ``` CommentList = [ { user: '张三', content: '哈哈，沙发' }, { user: '张三2', content: '哈哈，板凳' }, { user: '张三3', content: '哈哈，凉席' }, { user: '张三4', content: '哈哈，砖头' }, { user: '张三5', content: '哈哈，楼下山炮' } ] ``` ## 实现Commet组件 新建`src/components/Commet` 分析： 1.数据是该放在哪个位置？答案 肯定是组件的 私有状态中存放。也就是放在组件的构造函数中的state中。 2.我们知道 组件只能有一个父根容器，不可以有多个根容器。那么我们一般是用div来做根容器，而这个div又没有实质的意义，我们可以用react提供的Fragement组件表示空容器，也不会产生新的元素，来替代div元素。 实现 <iframe width="100%" height="300" src="//jsrun.net/fHyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ```javascript import React, {Component, Fragment} from 'react' //状态组件 export default class Commet extends Component { constructor(props) { super(props) this.state = { CommentList: [ {user: '张三', content: '哈哈，沙发'}, {user: '张三2', content: '哈哈，板凳'}, {user: '张三3', content: '哈哈，凉席'}, {user: '张三4', content: '哈哈，砖头'}, {user: '张三5', content: '哈哈，楼下山炮'} ] } } render() { return ( <Fragment> <div>评论组件标题</div> <ul> <li className="item"> <p className="title">张三</p> <p className="content">哈哈，楼下没默契</p> </li> </ul> </Fragment> ) } } ``` ## for循环显示多个评论列表 在Vue中如果想要实现渲染数组，那么通过v-for指令即可。但是在React中是没有指令的概念，那么又该如何实现对数组的渲染呢？答案 是通过数组的操作方式for循环或者是通过 forEach或者是map等等方法。 我们书写renderList方法，返回一个数组，请问一下为什么返回数组，同样的，有没有更简便的方法去实现这个效果？ <iframe width="100%" height="300" src="//jsrun.net/2HyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ~~~ renderList(){ var arr = []; for (var i = 0; i < this.state.CommentList.length; i++) { var item = this.state.CommentList[i]; arr.push( <li className="item"> <p className="title">{item.user}</p> <p className="content">{item.content}</p> </li> ) } return arr; } render() { return ( <Fragment> <div className="title">评论组件标题</div> <ul> {this.renderList()} </ul> </Fragment> ) } ~~~ 之所以返回数组原因是因为我们写的代码都是jsx。jsx最终都要通过react的createElement方法变为虚拟dom。虚拟dom中是对象和数组组件。所以我们必须返回数组。 同样的通过for循环较为麻烦我们可以通过 map方法更为简便。 <iframe width="100%" height="300" src="//jsrun.net/vHyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ~~~ renderList(){ return this.state.CommentList.map((item,index)=>{ return ( <li className="item"> <p className="title">{item.user}</p> <p className="content">{item.content}</p> </li> ) }) } ~~~ 在浏览器中会出现一个bug我们来修复一下。即key属性。 `react.development.js:188 Warning: Each child in a list should have a unique "key" prop.` ~~~ renderList(){ return this.state.CommentList.map((item,index)=>{ return ( <li className="item" key={item.user}> <p className="title">{item.user}</p> <p className="content">{item.content}</p> </li> ) }) } ~~~ ## 拆分组件 我们可以将评论列表项也单独的拆成一个组件。我们来实现一下。 src/components/Item.js文件 <iframe width="100%" height="300" src="//jsrun.net/LHyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ~~~ import React,{Component} from 'react' export default class Item extends Component { constructor(props){ super(props); } render(){ return ( <li className="item"> <p className="title">{this.props.user}</p> <p className="content">{this.props.content}</p> </li> ) } } ~~~ 修改Commet.js组件 ~~~ renderList(){ return this.state.CommentList.map((item,index)=>{ return ( <Item {...item} key={item.user}/> ) }) } ~~~