React学习笔记4
遇到的问题
目前模板是自己任意定义的,样式不好控制 在组件设计时,可以把页面数据显示的地方,分割父子组件嵌套的结构,比如,商品数据显示列表,把组外层容器看成是父组件,里面是数据显示的渲染模板,看成是子组件
做数据交互
1.实现父子组件的分离---父组件请求data,子组件解析
2.实现在父组件中,生命周期函数中请求ajax,得到数据后,先存在父组件的state中,再把state传递给子组件的props
3.在子组件中解析和打印数据
4.在父组件中控制子组件的叠加,最后将叠加结果通过父组件渲染到页面中
Mixins
Mixins是React组件中提供出的一个属性
在开发中很多功能(JS函数构成的模块)存在共性,将公共函数抽取,通过Mixins来使用
首先将公共的函数提取出来,放在一个Object中,这些方法提取出来以后的类型也是Object方法类型
使用:在需要调用公共方法的组件中,通过mixins:[commonApis]把commonApis对象中的方法都挂载到该组件的原型链上
在组件中要是用这些方法,只需要onChange={this.checkInput}即可
React学习笔记4的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
随机推荐
- 全文检索引擎Solr系列——Solr核心概念、配置文件
Document Document是Solr索引(动词,indexing)和搜索的最基本单元,它类似于关系数据库表中的一条记录,可以包含一个或多个字段(Field),每个字段包含一个name和文本值. ...
- linux下软件的种类和对应的安装及卸载的方式
转: 一个Linux应用程序的软件包中可以包含两种不同的内容: 1)一种就是可执行文件,也就是解开包后就可以直接运行的.在Windows中所 有的软件包都是这种类型.安装完这个程序后,你就可以使用,但 ...
- PyYAML和configparser模块讲解
Python也可以很容易的处理ymal文档格式,只不过需要安装一个模块,参考文档:http://pyyaml.org/wiki/PyYAMLDocumentation ymal主要用于配置文件. Co ...
- 生成器+列表生成式,生成器可以节省内存,随时调取函数运行,以及实现多线程运行函数,__next__()和.send(参数)的区别,a,b=b,a+b其实是元祖的用法,出现异常状态用try...except StopIteration来处理
列表生成式:是代码更简洁. 也可以是函数,比如func(i) 生成器:generator 列表生成式,是中括号,改成小括号,就是生成器: 如果你用列表生成式,生成一亿个数据:这里会卡好久,会生成一亿个 ...
- 从request获取各种路径总结 request.getRealPath("url")
转载:http://blog.csdn.net/piaoxuan1987/article/details/8541839 equest.getRealPath() 这个方法已经不推荐使用了,代替方法是 ...
- 关于object-c类目的理解
类目:为已知的类增加新的方法: 一.类目: 1. 类目方法的应用: 对现有类进行扩展:比如:可以扩展Cocoa touch框架中的类,在类目中增加的方法会被子类继承,而且在运行时跟其他的方法没有区别. ...
- java中的 equals 与 ==
Java中的"=="永远比较的是两个对象是否是同一个对象(引用指向同一块内存就是同一个对象) Java中equals() 在使用必须与类挂上钩,不能单独使用.有的人这样理解&quo ...
- MyEclipse从数据库反向生成实体类通过Hibernate的方式----mysql数据库实例
1.我们通过DB与数据库建立连接 2.建立web工程,构建Hibernate框架 3.通过table生成实体类
- PHP数据结构之一:PHP数据结构基本概念—数据结构
学习任何一种技术都应该先清楚它的基本概念,这是学习任何知识的起点!本文是讲述数据结构的基本概念,适合对数据结构已经有一定基础的程序员,更是适合想要学习数据结构的code一族!让我们开始PHP数据结构的 ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...