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 ...
随机推荐
- mysql5.7不支持0000-00-00 00:00:00的默认时间设置
方案一: 数据不多的话把原有的5.53的数据改一下符合要求(数据库时间字段里千万不能出现0000-00-00 00:00:00这样的值),然后导出.sql文件,导出的.sql文件里把 DEFAULT ...
- 几种经典的hash算法
计算理论中,没有Hash函数的说法,只有单向函数的说法.所谓的单向函数,是一个复杂的定义,大家可以去看计算理论或者密码学方面的数据.用“人 类”的语言描述单向函数就是:如果某个函数在给定输入的时候,很 ...
- PTA PAT排名汇总(25 分)
PAT排名汇总(25 分) 计算机程序设计能力考试(Programming Ability Test,简称PAT)旨在通过统一组织的在线考试及自动评测方法客观地评判考生的算法设计与程序设计实现能力,科 ...
- Java-Runoob-高级教程:Java 9 新特性
ylbtech-Java-Runoob-高级教程:Java 9 新特性 1.返回顶部 1. Java 9 新特性 Java 9 发布于 2017 年 9 月 22 日,带来了很多新特性,其中最主要的变 ...
- U-boot分析与移植(3)----U-boot stage2分析
一来到void start_armboot (void)函数,马上出现两个很重要的数据结构gd_t和bd_t 1.gd_t : global data数据结构定义,位于文件 include/asm-a ...
- requests的响应返回值显示content和text方法的区别
requests的get或者post请求,返回的响应response获取方法:content和text content用于获取图片,返回二进制数据 text用于获取内容,返回的是unicode解码字符 ...
- Linux - 目录结构及文件操作
根目录 “/”:Linux 系统中最高层的目录 这个就是根目录 用 / 表示根目录 bin 目录:存放可执行文件 bin 目录下的文件都是平常使用的命令 在 Linux 系统中,一切都是文件 sbin ...
- 【原】Coursera—Andrew Ng机器学习—Week 1 习题—Linear Regression with One Variable 单变量线性回归
Question 1 Consider the problem of predicting how well a student does in her second year of college/ ...
- Write your first jQuery plugin
本文固定链接: http://www.jquery.org.cn/archives/380 一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法:另一 ...
- 初次用SqlServer查看本地的Excel文件时需要注意的地方
日常用到通过SqlServer 读取Excel文件的案例 ,记录下来 文件路径 :C:\Users\Administrator\Desktop\icd10.xls 1.查询语句: SELECT *F ...