快来退出咱们吧！
“小和山的菜鸟们”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。
“Code tailor” ，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！
实战案例(三)：留言性能改版
咱们这次学了一些新内容，咱们须要将之前的改版。
新增点赞性能
如果咱们须要对某个评论进行点赞怎么办呢？
如果依照上次那样子通过某个属性传入管制是否显示点赞，这是能够的。
咱们上次形象了 InputCompoent 输入框组件和 EvaluateCompoent 列表展现组件这两个组件，这次咱们须要新增一个 comment 组件来实现点赞性能。
不须要的组件去除
上次咱们将 InputCompoent 输入框组件和 EvaluateCompoent 列表展现组件形象进去搁置于 component 文件夹中，咱们先将这两个组件间接搁置于App.js中。（为了直观，咱们先这两个曾经形象好的给间接搁置于 App.js 中）
咱们只须要形象一个comment组件，给上次的EvaluateCompoent列表展现组件加上咱们的点赞性能，每个列表中的评论咱们都能够进行点赞。
因而咱们将首页App.js批改为如下：
import React, { PureComponent } from 'react'
import Comment from './comment'
import './App.css'
class App extends PureComponent {
constructor() {
super()
this.state = {
title: 'Hello React',
desc: '你晓得有这么一个团队吗？他们怀揣幻想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的工夫，抉择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目标很简略，心愿能够帮忙向他们一样的菜鸟们？你想理解更多吗？快搜寻微信公众号：小和山的菜鸟们，退出他们吧！',
comments: [
{
headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
time: new Date(2021, 4, 14, 21, 2, 30),
nickName: '小菜鸟',
detail: '这是一个行将推出系列文章的团队，咱们一起期待他们的作品吧！',
liked: true,
likeNum: 23,
},
],
text: '',
}
}
render() {
const { title, desc, comments, text } = this.state
return (
<div className="App">
<h2>{title}</h2>
<div className="desc">{desc}</div>
<div style={{ width: '100%' }}>
<p className="commentsTitle">评论</p>
{comments.map((item, index) => {
return (
<Comment
key={item.time.getTime()}
changeLike={() => {
this.changeLike(index)
}}
{...item}
/>
)
})}
</div>
<div className="newComment">
<div style={{ display: 'flex' }}>
<img src="https://xhs-rookies.com/img/rookie-icon.png" className="" alt="" />
<textarea value={text} onChange={(e) => this.changeText(e)} placeholder="请输出评论" />
</div>
<div
className="submit"
onClick={() => {
this.addComment()
}}
>
发表
</div>
</div>
</div>
)
}
changeText(e) {
this.setState({ text: e.target.value })
}
changeLike(index) {
let newArray = [...this.state.comments]
let newItem = { ...newArray[index] }
if (newItem.liked) {
newItem.liked = false
newItem.likeNum -= 1
} else {
newItem.liked = true
newItem.likeNum += 1
}
newArray[index] = newItem
this.setState({
comments: newArray,
})
}
addComment() {
if (!this.state.text) {
alert('请输出留言内容')
return
}
let detail = this.state.text
this.setState({ text: '' })
let newComment = {
headPortrait: 'https://xhs-rookies.com/img/rookie-icon.png',
time: new Date(),
nickName: '小菜鸟',
detail,
liked: false,
likeNum: 0,
}
this.setState({
comments: [newComment, ...this.state.comments],
})
}
}
App.propTypes = {}
export default App组合 comment 组件
点赞性能
首先咱们须要思考这个组件须要什么性能。
除了上次形象进去的：
须要有头像、工夫、名字、内容这几个外，咱们还须要一个点赞按钮，这个按钮点击一下变成红色，并且数字加一，再次点击色彩从新改为灰色，并且数字减一。
<span className={'likeBox ' + (liked ? 'like' : 'unlike')} onClick={() => changeLike()}>
<span className="icon"> </span>
<span>{!!likeNum && likeNum}</span>
</span>一个 span 用于寄存点赞图标，一个用于显示点赞的数字。
数据检测
这次咱们数据变得更加多了，里面传给该组件的数据越来越多之后，咱们如何判断，或是说保障给进来内容是正确的呢？（是否为空？）
咱们采纳propType进行内容检测，如果呈现谬误，能够疾速帮咱们定位谬误并进行批改。
Comment.propTypes = {
nickName: PropTypes.string.isRequired,
time: PropTypes.object.isRequired,
headPortrait: PropTypes.string.isRequired,
detail: PropTypes.string.isRequired,
liked: PropTypes.bool.isRequired,
likeNum: PropTypes.number.isRequired,
changeLike: PropTypes.func.isRequired,
}最终组合
那咱们将之前的EvaluateCompoent列表展现组件加上点赞性能，在将数据检测性能增加进去，咱们的 comment 组件就实现了。
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import './comment.css'
class Comment extends PureComponent {
render() {
const { nickName, time, headPortrait, detail, liked, likeNum, changeLike } = this.props
return (
<div className="comment">
<div className="info">
<img src={headPortrait} alt="头像" />
<div>
<p className="nickname">{nickName}</p>
<p className="time">{this.getTime(time)}</p>
</div>
</div>
<div className="detail" style={{ marginBottom: '10px' }}>
{detail}
</div>
<div className="toolBox">
<span className={'likeBox ' + (liked ? 'like' : 'unlike')} onClick={() => changeLike()}>
<span className="icon"> </span>
<span>{!!likeNum && likeNum}</span>
</span>
<span className="share icon"> </span>
</div>
</div>
)
}
getTime(time) {
const year = time.getFullYear()
const month = time.getMonth() + 1
const day = time.getDate()
const hour = String(time.getHours()).padStart(2, '0')
const minute = String(time.getMinutes()).padStart(2, '0')
const second = String(time.getSeconds()).padStart(2, '0')
return `${year}.${month}.${day} ${hour}:${minute}:${second}`
}
}
Comment.propTypes = {
nickName: PropTypes.string.isRequired,
time: PropTypes.object.isRequired,
headPortrait: PropTypes.string.isRequired,
detail: PropTypes.string.isRequired,
liked: PropTypes.bool.isRequired,
likeNum: PropTypes.number.isRequired,
changeLike: PropTypes.func.isRequired,
}
export default Comment源码地址
我的项目 github 地址
间接预览
咱们倡议采纳 codesanbox 的模式能够在线快速访问以后实战案例。
CodeSandBox
下节预报
下节中咱们将讲述应用React中State的相干信息，深刻了解 setState 办法以及一些相干内容。敬请期待！
发表回复