遇到的问题

目前模板是自己任意定义的，样式不好控制 在组件设计时，可以把页面数据显示的地方，分割父子组件嵌套的结构，比如，商品数据显示列表，把组外层容器看成是父组件，里面是数据显示的渲染模板，看成是子组件

 

做数据交互

1.实现父子组件的分离---父组件请求data，子组件解析

2.实现在父组件中，生命周期函数中请求ajax，得到数据后，先存在父组件的state中，再把state传递给子组件的props

3.在子组件中解析和打印数据

4.在父组件中控制子组件的叠加，最后将叠加结果通过父组件渲染到页面中

 

Mixins

Mixins是React组件中提供出的一个属性

在开发中很多功能（JS函数构成的模块）存在共性，将公共函数抽取，通过Mixins来使用

首先将公共的函数提取出来，放在一个Object中，这些方法提取出来以后的类型也是Object方法类型

使用:在需要调用公共方法的组件中，通过mixins:[commonApis]把commonApis对象中的方法都挂载到该组件的原型链上

在组件中要是用这些方法，只需要onChange={this.checkInput}即可

React学习笔记4的更多相关文章

  1. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记（七）条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记（六）事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记（五）State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  10. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

随机推荐

  1. Socket代码

    服务器端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

  2. 地下迷宫探索（dfs）

    地下迷宫探索(30 分) 地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的地下工事,如下图所示. 我们在回顾前辈们艰苦卓绝的战争生活的同时 ...

  3. Java-Maven-Runoob：Maven构建生命周期

    ylbtech-Java-Maven-Runoob:Maven构建生命周期 1.返回顶部 1. Maven 构建生命周期 Maven 构建生命周期定义了一个项目构建跟发布的过程. 一个典型的 Mave ...

  4. CentOS7 日期时间设置

    1.设置系统时间为中国时区并启用NTP同步 yum install ntp //安装ntp服务 systemctl enable ntpd //开机启动服务 systemctl start ntpd ...

  5. python开发socket套接字：粘包问题&udp套接字&socketserver

    一,发生粘包 服务器端 from socket import * phone=socket(AF_INET,SOCK_STREAM) #套接字 phone.setsockopt(SOL_SOCKET, ...

  6. AJAX的流程是什么？

    客户端产生js的事件 创建XMLHttpRequest对象 对XMLHttpRequest进行配置 通过AJAX引擎发送异步请求 服务器端接受请求并且处理请求,返回html或者xml内容 XML调用一 ...

  7. ctf中检测和分离隐藏的文件

    使用binwalk检测是否隐藏了文件 root@sch01ar:~# binwalk '/root/桌面/test.jpg' 还藏了一个zip文件,接下来用foremost来分离文件 root@sch ...

  8. 虚拟机在 OpenStack 里没有共享存储条件下的在线迁移

    虚拟机在 OpenStack 里没有共享存储条件下的在线迁移 本文尝试回答与 Live migration 相关的几个问题:Live migration 是什么?为什么要做 Live migratio ...

  9. Linq语句：三表联查

    var db = new DataEntities2();            var sss = ( from c in db.AIRPORT_HELIPORT                   ...

  10. 科学家开发新AI系统，可读取大脑信息并表达复杂思想

    我们终于找到了一种方法,可以在核磁共振成像的信号中看到这种复杂的想法.美国卡内基梅隆大学的Marcel Just说,思维和大脑活动模式之间的对应关系告诉我们这些想法是如何构建的. 人工智能系统表明,大 ...