遇到的问题

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

 

做数据交互

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. 几种系统下查看FC HBA卡信息的方法

    几种系统下查看FC HBA卡信息的方法 目  录 几种系统下查看FC HBA卡信息的方法 FC HBA卡概述 Windows系统下查看FC HBA卡的信息 Linux系统下查看FC HBA卡的信息 U ...

  2. php.ini修改php上传文件大小限制

    打开php.ini,首先找到file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就 ...

  3. mysql索引设计

    mysql索引设计 1.B树与B+树的区别?B-Tree:一个节点可以拥有大于2个子节点的平衡多叉树,所有关键字在整颗树中出现,包括在非叶子节点也能命中, 叶子节点之间没有链表B+Tree:每个叶子节 ...

  4. MySQL优化方法论

    MySQL优化方法 主机 操作系统 数据库 应用 MySQL优化理论 吞吐率(Throughput) VS 延时(Latency) 吞吐率: 我们一般使用单位时间内服务器处理的请求数来描述其并发处理能 ...

  5. C# winform中PictureBox控件的SizeMode模式

    SizeMode属性有五种模式, Normal →标准模式, 在此模式下, 图片位于PictureBox的左上角, 图片的大小由PictureBox控件的大小决定, 当图片的大小大于PictureBo ...

  6. [新手教程]windows 2003 php环境搭建详细教程(转)

    对于windows服务器的php环境配置一直是是新人朋友的难题,也难倒了很多高手.这里分享一个新手教程,给那些建站新人使用.本教程来自朋友吴文辉的博客,欢迎大家有时间可以访问他的博客:吴文辉博客htt ...

  7. win7重新安装后删除文件权限不够（小技巧）

    选择文件,安全,编辑,如果用户权限可以编辑,那么赋予提示的用户权限. 如果此时用户不可编辑,那先把所属用户换了,安全,高级,所有者,更换所有者之后,权限就可以编辑了.

  8. js中的webworker

    js中的webworker webworker的作用类似于java的多线程 以独立文件的形式运行webworker index.html <!DOCTYPE html> <html ...

  9. Anaconda使用总结（文章来自网络）

    序 Python易用,但用好却不易,其中比较头疼的就是包管理和Python不同版本的问题,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python,比如WinPython.An ...

  10. Angular-cli新建项目目录结构详解

    Angular-cli新建项目目录结构详解 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...