使用react封装评论组件
首先看我的效果图

我在评论框中输入数据,会在页面进行显示
这个效果图我们进行拆分就是,一个评论组件,一个大的评论列表组件,一个小的评论组件
首先整个页面中有的是我们的评论组件和列表组件

我们输入评论点击的时候会将评论放入一个数组中,最后存到状态机里面。通过this.state.comments我们的评论列表中
取到输入的评论
在我们的评论组件中,我们需要取到textarea中的值,从state中取到数据,最后通过事件将输入值传给父组件。


在我们的评论列表中,会通过遍历每一个小的评论组件展示数据

我们会将comment数据传递给我们的单个组件

我们的小组件中会通过this.props.comment进行取数据
by 组件最终的代码是以上这些,可是我自己封装的过程中,其实会遇到一些问题,思路是倒着的那种。我会首先写出一条评论
会看到里面要用到什么数据。接下来的话,就是将这个组件渲染在列表中,这个时候我会模拟数据了,模拟数据在列表中进行展示。
做到这一步也不难。我觉得让我需要记住的一些点就是,我的评论组件,我输入框中的值,是通过

取到的。点击发送按钮的时候,我数据的传递,最后还将数据清空

在顶层组件中我值的校验以及传递和取的方法

点击传参数,state存取数据,父组件的传入数据,子组件通过props取数据这些结合在一起感觉很有趣
by 我还差的太远了,后面还会做评论持久化等内容
使用react封装评论组件的更多相关文章
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- react-react中的css+评论组件
一个小案例,巩固有状态组件和无状态组件的使用 通过for循环生成多个组件 数据: CommentList = [ { user: '张三', content: '哈哈,沙发' }, { user: ' ...
- React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- 封装Vue组件的一些技巧
封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...
随机推荐
- git bash返回上一级目录
YITU-LIUMZ+Administrator@yitu-liumz MINGW64 ~/learngit/gitskills (dev)$ cd ..\ 注意 cd 后面有空格 然后就会弹出一个 ...
- 不重叠的线段 51nod
链接 [http://www.51nod.com/onlineJudge/questionCode.html#problemId=1133¬iceId=468024] 题意 X轴上有N条 ...
- Notes of Daily Scrum Meeting(12.24)
平安夜了,我们还在这里辛苦地赶代码,整个人都不好了... 今天的团队任务总结如下: 团队成员 今日团队工作 陈少杰 寻找大神帮助,调试网络连接 王迪 建立搜索的UI界面,把算法加入进去 金鑫 调试网络 ...
- Linux内核分析第五周学习总结
扒开系统调用的三层皮(下) 20135237朱国庆+ 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/UST ...
- 20135337——Linux实践三:ELF文件格式(64位系统,简单分析)
ELF文件格式简单分析 (具体分析见上一篇ELF文件格式32位系统) ELF-header 第一行: 457f 464c :魔数: 0201 :64位系统,小端法 01 :文件头版本 剩余默认0: 第 ...
- EL表达式和JSTL标签库
expresion language表达式语言 可以输出表达式的值.跟jsp的表达式脚本一样.计算表达式的值后输出. EL表达式出现的目的是为了使JSP写起来更加简单,让jsp的代码更佳简化. 1. ...
- 使用composer遇到的问题及解决方法
可以尝试利用composer下载Yii框架,编辑composer.json文件: { "require":{ "yiisoft/yii2":"~2.0 ...
- PAT 1038 统计同成绩学生
https://pintia.cn/problem-sets/994805260223102976/problems/994805284092887040 本题要求读入N名学生的成绩,将获得某一给定分 ...
- php的四种基本算法
/* 冒泡算法:结果从小到大,规则类似波浪推动的沙滩,先初始阈值为 0,初始第一次波浪之后,如果发现有左值比右边的大,就改变阈值并且完成波浪推动,重新初始化阈值为0,如此往复,直到没有阈值改变的情况出 ...
- 我终于激活Windows Server2008 R2了!!
经过我不懈的努力,在重装两次系统后,我终于实现了win2008的KMS激活.这个方法可以避免虚拟机架设KMS服务器的麻烦.现将激活方法发布如下. 首先要选择安装的操作系统.Windows Server ...