遇到的问题

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

 

做数据交互

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. php redis 常用方法

    一些php redis 常用的方法: 1.hGet($key,$hashKey) Redis Hget 命令用于返回哈希表中指定字段的值. <?php $redis = new redis(); ...

  2. java代码用户界面网格布局GridLayout.划分为格子区域

    总结:网格布局.很简单,首先要new一个   this.setlayout(new GriedLayout(3,5));里面是行数和列数 package clientFrame; //网格布局练习 i ...

  3. netty中的websocket

    使用WebSocket 协议来实现一个基于浏览器的聊天室应用程序,图12-1 说明了该应用程序的逻辑: (1)客户端发送一个消息:(2)该消息将被广播到所有其他连接的客户端. WebSocket 在从 ...

  4. C#根据字体名通过注册表获取该字体文件路径(win10)两种方法推荐第二种

    方法一: 直接先上源码: private System.Collections.Generic.SortedDictionary<string, string> ReadFontInfor ...

  5. spring mvc helloworld 和表单功能、页面重定向

    Spring MVC Hello World 例子 这里有个很好的教程:https://www.cnblogs.com/wormday/p/8435617.html 下面的例子说明了如何使用 Spri ...

  6. Deep Learning 学习笔记（3）：Linear Regression 数据的预处理

    为了获得良好的收敛,在进行梯度下降前,我们可以对数据进行预处理. 目标是使得数据大小在同一个数据数量级上,均值为零. 一般将数据放缩到(-1,1)区间, 我们可以对数据进行如下操作: 其中u1是数据的 ...

  7. mfs教程(二)

    mfs文件系统(二) 编译和安装 MooseFS部署的首选方法是从源代码安装 源代码包安装支持标准./configure && make && make install ...

  8. Oracle设置主键自增长

    第一步:为表设置主键 第二步:新建序列 CREATE SEQUENCE SQ.SEQ_INCREASE  START WITH 12  MAXVALUE 999  MINVALUE 0 INCREME ...

  9. 使用Maven构建多模块企业项目

    首先,前面几次学习已经学会了安装maven,如何创建maven项目等,最近的学习,终于有点进展了,搭建一下企业级多模块项目. 好了,废话不多说,具体如下: 首先新建一个maven项目,pom.xml的 ...

  10. c# 如何制作RealPlayer 视频播放器

      c# 如何制作RealPlayer 视频播放器 主要介绍了如何使用 RealPlayer G2 Control 控件 那么我们怎么获得到这个控件呢,很简单,操作方法如下 右单击工具箱对话框的[所有 ...