遇到的问题

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

 

做数据交互

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. Nginx 改变错误日志打印级别

    Nginx 改变错误日志打印级别 user  root;worker_processes  2; worker_rlimit_nofile 10240;error_log logs/nginx_err ...

  2. Win10的Hosts文件修改后无法保存的问题解决方法,实测可以

    1.hosts文件是什么?有什么作用呢? Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个 ...

  3. java代码=--数组复制

    总结:arraycopy注意数组定义的长度.不足会补0 package clientFrame; //数组的复制arraycopy() public class Xiang { public stat ...

  4. Java-Runoob:Java 循环结构

    ylbtech-Java-Runoob:Java 循环结构 - for, while 及 do...while 1.返回顶部 1. Java 循环结构 - for, while 及 do...whil ...

  5. Java-Runoob:Java 简介

    ylbtech-Java-Runoob:Java 简介 1.返回顶部 1. Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java ...

  6. chrome打开新标签页插件

    标签(空格分隔): 日常办公,chrome浏览器 一直被chrome浏览器打开新标签页困扰,每次点开一个新标签页还要再去点一下主页,才能打开搜索页面.如果直接点击主页,又会把当前的页面刷掉,实在是非常 ...

  7. mysql 无意重启 [Note] /usr/sbin/mysqld: Normal shutdown

    情况: 今早发现,昨天下午安装的4台mysql服务器,突然出现,由于在shell窗口 (root@localhost:mysql.sock) [(none)]> 190102 18:12:16 ...

  8. IDA Pro 权威指南学习笔记(五) - IDA 主要的数据显示窗口

    在默认配置下,IDA(从 6.1 版开始)会在对新二进制文件的初始加载和分析阶段创建 7 个显示窗口 3 个立即可见的窗口分别为 IDA-View 窗口.函数窗口和消息输出窗口 可以通过 View - ...

  9. CDM中,创建一个或多个组合属性的唯一约束

    除主键外,有时还需要创建一个或多个组合字段的唯一约束,方法如下: 双击打开实体,在idntifier标签页中可看到默认主键的唯一约束,在其下方添加一条记录,然后双击该记录,打开约束设置窗口 在该窗口的 ...

  10. requirejs——define——普通模块

    一.普通模块可能包含的内容: 一个模块对应着一个js文件,由于模块可能包含着以下三种内容:模块名.依赖模块.返回给其他模块使用的参数:因此js文件根据包含内容的不同而写法不同. 一.传统的js脚本文件 ...