React系列实战篇(留言功能(二))
快来加入我们吧!
"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习,及时获取最新文章。
"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!
实战案例(二):留言功能改进
学到这里,我们把上面案例给修改一下,不要通过原始的 html
加 CDN
的方法引入 React
,我们来采用 React
给我们提供的脚手架来改写一下上次的内容。
创建一个空的 react 项目
首先我们使用 react 官方提供的脚手架来创建一个工程
npm create react-app appname
注意: 在创建工程的时候也许会出现卡住的情况,请保证网络流畅的状态下创建。组件化开发
我们先将之前的
html
中的输入框和展示框抽象成为组件。InputCompoent 输入框组件 该输入框组件需要预留一个方法,将输入的内容传输到父组件中,因此我们需要预留一个名为
sendSubmit
的方法,从外部传入,并通过回调的方法进行父子组件通信。import React, { Component } from 'react'
import './InputComponent.css'export default class InputCompoent extends Component {
constructor() {
super()
this.state = {
inputMess: '',
}
}
render() {
return (
文章图片
EvaluateCompoent 列表展示组件 我们只需要给
EvaluateCompoent
组件传输一个名为evaluateList
的属性列表,返回给我们这些评论的内容。import React, { Component } from 'react'
import './EvaluateCompoent.css'export class EvaluateCompoent extends Component {
render() {
return (大伙的评论
{/* 接收留言列表参数并遍历展示 */}
{this.props.evaluateList.map((item) => {
return ({item.nickName}
{item.sendTime}{item.evaluate})
})})
}
}export default EvaluateCompoent
组合该两个组件并展示出来
我们修改
App.js
并将内容组合起来。我们将回调取得的内容放置于主页面的
state
中,并将该state
中的内容传输给EvaluateCompoent
展示组件进行展示。import React, { PureComponent } from 'react'
import EvaluateCompoent from './components/EvaluateCompoent/EvaluateCompoent'
import InputCompoent from './components/InputComponents/InputCompoent'
import './App.css'export class App extends PureComponent {
constructor(props) {
super(props)
this.state = {
evaluateList: [
{
imgUrl: 'https://xhs-rookies.com/img/rookie-icon.png',
nickName: '菜鸟一号',
sendTime: '2021.05.14',
evaluate: '这是一个即将推出系列文章的团队,我们一起期待他们的作品吧!',
},
],
message:
'你知道有这么一个团队吗?他们怀揣梦想,艰苦奋斗,作为一群大学生菜鸟,放弃了平时娱乐的时间,选择一起学习,一起成长,将平时学习的笔记,心得总结为文章,目的很简单,希望可以帮助向他们一样的菜鸟们?你想了解更多吗?快搜索微信公众号:小和山的菜鸟们,加入他们吧!',
}
}
render() {
return (Hello React{this.state.message}
this.sendSubmit(e)} />)
}sendSubmit(e) {
let data = https://www.it610.com/article/{
imgUrl:'https://xhs-rookies.com/img/rookie-icon.png',
nickName: '菜鸟一号',
sendTime: '2021.05.14',
evaluate: e,
}
this.setState({
evaluateList: [data, ...this.state.evaluateList],
})
}
}export default App
源码地址
项目 github 地址
直接预览
【React系列实战篇(留言功能(二))】我们建议采用
codesanbox
的形式可以在线快速访问当前实战案例。CodeSandBox
下节预告 本节我们运用了 React 脚手架、组件化的思想重写了之前的留言板实战案例,在下一个章节我们将继续学习 React 中组件化通信的内容,敬请期待!
推荐阅读
- 【欢喜是你·三宅系列①】⑶
- 你不可不知的真相系列之科学
- 人脸识别|【人脸识别系列】| 实现自动化妆
- 《机器学习实战》高清中文版PDF英文版PDF+源代码下载
- react|react 安装
- 2018-06-13金句系列7(金句结构-改编古现代诗词)
- Unity和Android通信系列文章2——扩展UnityPlayerActivity
- --木木--|--木木-- 第二课作业#翼丰会(每日一淘6+1实战裂变被动引流# 6+1模式)
- 乡野村趣系列之烧仙草
- Java内存泄漏分析系列之二(jstack生成的Thread|Java内存泄漏分析系列之二:jstack生成的Thread Dump日志结构解析)