# 評論列表組件 鞏固有狀態組件和無狀態組件的使用，實現評論列表開發，實現如下效果。  ## 結構 `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}/> ) }) } ~~~