首先看我的效果图

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

我们输入评论点击的时候会将评论放入一个数组中，最后存到状态机里面。通过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. ceph学习

    网络: ceph必须要有公共网络和集群网络: public network:负责客户端交互以及osd与mon之间的通讯 cluster network:负责osd之间的复制,均衡,回填,数据恢复等操作 ...

  2. C语言----数据类型（基础篇一）

    C语言的入门程序模板 #include <stdio.h> /*使用或者包含系统里面的程序*/ main() /*程序入口点*/ { /*起点*/ +; /*叫计算机执行的指令*/ } / ...

  3. og标签对SEO的作用及用法

    meta property=og标签对SEO的作用及用法,如果你仔细观察会发现本站点<head>代码中有一段:"property="og:image"这段代码 ...

  4. 代码规范(RL-TOC)用更合理的方式写 JavaScript

    代码可以改变世界 不规范代码可以毁掉世界 只有先学会写规范的代码,才可以走的更远 编程语言之间有很多编程规范都是通用: 命名 不要用语言不明的缩写,不用担心名字过长,名字一定要让别人知道确切的意思; ...

  5. HDU 3537 Daizhenyang's Coin

    链接 [http://acm.hdu.edu.cn/showproblem.php?pid=3537] 题意 题意:已知一排硬币中有n个硬币正面朝上,输入正面朝上的硬币的位置ai.两人轮流操作, 每次 ...

  6. Linux学习期中总结

    一.<Linux内核分析>总结 (一)计算机是如何工作的 1.存储程序计算机工作模型 2. X86CPU的寄存器:通用寄存器.段寄存器.标志寄存器等. 3.计算机的汇编指令 (1)movl ...

  7. package.json中的几种依赖注册对象解析

    本博文根据官网+google翻译+自己的理解,欢迎指出翻译的不到位的地方. package.json的重要性不言而喻,一直以来对几种依赖注册对象的区别和作用不是很了解,今日一探究竟. dependen ...

  8. 使用eclipse利用Junit4进行程序模块的测试

    一.题目简介 通过用户输入年份和月份,然后在控制台显示该年该月的日历. 二.源码的github链接. https://github.com/zhangxinn/test/blob/master/Pri ...

  9. Practice4 阅读《构建之法》6-7章

    关于第五章后面的阅读已经在Practice3中有所感悟,下面是6-7章的读书笔记. 第6章 敏捷流程这一章讲了“敏捷流程”这一概念,关于这一名词我是很陌生的,在阅读之后有了一定的理解.敏捷流程是提供了 ...

  10. 开源RabbitMQ操作组件

    开源RabbitMQ操作组件 对于目前大多的.NET项目,其实使用的技术栈都是差不多,估计现在很少用控件开发项目的了,毕竟一大堆问题.对.NET的项目,目前比较适合的架构ASP.NET MVC,ASP ...