React系列实战篇：留言功能（三）

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( 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 (
      

        
{title}

        
{desc}

        

          
评论

          {comments.map((item, index) => {
            return (
               {
                  this.changeLike(index)
                }}
                {...item}
              />
            )
          })}