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 ...
随机推荐
- optimize table tablename
optimize 优化表OPTIMIZE 命令支持的引擎MyIsam, InnoDB, ARCHVE当对表有大量的增删改操作时,需要用optimize对表进行优化,可以减少空间与提高I/O性能,命令o ...
- selenium之 chromedriver与chrome版本映射表
看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持的Chrome版本 v2.40 v66-68 v2. ...
- chrome浏览器手动添加印象笔记剪藏插件
标签(空格分隔): chrome浏览器,日常办公 一直为每次从网页上复制内容之后,还需要再去复制对应的网址,倍感麻烦.之前偶尔这样操作还可以,最近在学习新东西,要保留下来的网页实在太多,而且不利于分类 ...
- 1121 Damn Single
题意: 给出n对情侣,然后给出聚会上的m个人,问这m个人中有几个人事落单的. 思路: 首先,开一个数组couple[]存储情侣间的映射关系:然后,用exist[]标记聚会上出现过的人:最后遍历0~N, ...
- monolog 应该是世界上最好的日志插件了
引入 composer require monolog/monolog 官网 https://github.com/Seldaek/monolog 创建工具类 <?php /** * Creat ...
- Java面试(二)
1 同步方法 VS 同步代码块: java中,每一个对象都有一把锁,线程用synchronized获取对象上的锁. 非静态同步方法:锁是类的对象的锁. 静态同步方法:锁的是类本身. 同步方法块:锁是可 ...
- linux lcd设备驱动剖析二
上一节中,分析了s3c2410fb,c的入口出口函数,以及一些重要结构体的分析,初步知道了这是一个平台驱动的架构. 上一节文章链接:http://blog.csdn.net/lwj103862095/ ...
- TIMEQUEST学习之黑金动力(二)
之一就是第一章,这是第二章.在开始之前,要对第一章内容说说我理解到的: (1)时序分析是节点对节点的分析.(2)这个latch edge是锁存上一个lunch edge输出的(满足建立关系的)值.(3 ...
- 2014.8.25 VS新建项目模板消失解决方法
Vs2005 新建项目时windows应用程序模板消失问题解决方法: 1:进入C:\Program Files (x86)\Microsoft Visual Studio 8\Common7\IDE\ ...
- java的mysql初探
在实现如下demo之前,要安装mysql的驱动mysql-connector-java-gpl-5.1.26.msi DEMO: /* * 简单数据库测试 * @李志杰 * 2013-8-4 */ p ...