快来加入我们吧!
"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( 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: '你知道有这么一个团队吗?他们怀揣梦想,艰苦奋斗,作为一群大学生菜鸟,放弃了平时娱乐的时间,选择一起学习,一起成长,将平时学习的笔记,心得总结为文章,目的很简单,希望可以帮助向他们一样的菜