评论列表案例-将评论Item项抽离为单独的CmtItem组件
这是评论列表组件
评论人：张三 评论内容：哈哈，沙发 |
评论人：李四 评论内容：哈哈，板凳 |
评论人：王五 评论内容：哈哈，凉席 |
评论人：赵六 评论内容：哈哈，砖头 |
评论人：田七 评论内容：哈哈，楼下山炮 |
这里每一项都是CmtItem组件，在代码中只有 <div>是
{this.state.CommentList.map(item =><div key={item.id}>
<h1>评论人: {item.user}</h1>
<p>评论内容: {item.content}</p>
</div>）}
</div>}
}
}
在当前整个 div 所控制区域里的 id、user、comtent 都是通过 item.出来的，item不在范围内，所以 id、user、comtent 都是从外界传递过来的，所以适合被定义为 front 组件。
所以：使用 function 构造函数，定义普通的无状态组件：
function CmtItem(props){
return<div key={ props.id}><h1
评论人: { props.user}</h1><p>
评论内容:{ props.content}</p>
</div>
}
组件创建完成。然后以标签形式把 CmtItem放到页面上：
{this.state.CommentList.map(item => <CmtItem>/cmtItem)}
保存，结构都有但数据没有传上去，所以：
{this.state.CommentList.map(item => <CmtItem {...item}></CmtItem>)}
但是出现一个警告：unique“Key”
虽然 Key 已经加上了，但是 map控制的不是所加 Key 的 div，所以：
{this.state.CommentList.map(item=><Cmtltem...item} key={item.id}></CmtItem>)}
