首先看我的效果图

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

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


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

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

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

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

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

点击传参数,state存取数据,父组件的传入数据,子组件通过props取数据这些结合在一起感觉很有趣

by 我还差的太远了,后面还会做评论持久化等内容

使用react封装评论组件的更多相关文章

  1. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  2. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  3. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  4. 封装 React Native 原生组件(iOS / Android)

    封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...

  5. react-react中的css+评论组件

    一个小案例,巩固有状态组件和无状态组件的使用 通过for循环生成多个组件 数据: CommentList = [ { user: '张三', content: '哈哈,沙发' }, { user: ' ...

  6. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  7. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  8. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  9. 封装Vue组件的一些技巧

    封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...

随机推荐

  1. 有道云笔记导入txt文件的方法

    有道云笔记pc版迷之不能导入txt文件 尝试很多方法后发现 通过网页版 有道云 可以直接上传 但是pc版不能查看而移动端可以查看 很迷~

  2. json模块 & pickle模块

    之前学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊类型的时候,eval就不管用了,所 ...

  3. Redis Cluster日常操作命令梳理

    在之前的一篇文章已经介绍了Redis Cluster及其部署,下面说下Redis Cluster日常操作命令: 一.以下命令是Redis Cluster集群所独有的,执行下面命令需要先登录redis: ...

  4. 龟速机器学习总结----day1

    机器学习主要工作大致分为以下几步,数据预处理,包括数据切分,特征选取,数据缺失值处理,来了解数据.接下来分割数据,分别分出训练集和测试集.第三步,选择模型,使用训练数据训练模型参数,再对测试数据进行预 ...

  5. Ubuntu14.04安装PyMuPDF

    最近写的一个东西需要将pdf转成图片然后放在网页上展示,找到了个非常好用的轮子叫做PyMuPDF,在windows上测试的时候跑的666,在ubuntu上安装依赖的时候,简直万脸懵逼.github上给 ...

  6. linux第三次读书笔记

    第七章:链接 一.编译器驱动程序 编译系统提供的调用预处理器.编译器.汇编器和链接器来构造目标文件的程序. 二.静态链接 三.目标文件 三种形式: 1.可重定位目标文件: 2.可执行目标文件: 3.共 ...

  7. Android中Json数据读取与创建的方法

    转自:http://www.jb51.net/article/70875.htm 首先介绍下JSON的定义,JSON是JavaScript Object Notation的缩写. 一种轻量级的数据交换 ...

  8. ADC转换的分辨率

    分辨率是指ADC能够分辨量化的最小信号的能力.分辨率用二进制位数表示.例如对一个10位的ADC,其所能分辨的最小量化电平为参考电平(满量程)的2的10次方分之一.也就是说分辨率越高,就能把满量程里的电 ...

  9. PHP压力测试使用apache的ab工具和Linux的time命令

    ab工具是apache自带的一个压力测试工具,可以在apache的安装路径下的bin目录下找到,我的环境中是在/usr/local/apache/bin/目录下: ab 压测主要使用两个参数: -n ...

  10. [转帖] 从零开始编写自己的C#框架(27)——什么是开发框架

    从零开始编写自己的C#框架(27)——什么是开发框架 http://www.cnblogs.com/EmptyFS/p/4105713.html 没写过代码 一直不清楚 框架的含义 不过看了一遍 也没 ...