具体代码可以查看我的代码仓库

https://gitee.com/haomYGH/Web20/tree/master/010-React/014-redux-immutable

页面展示

要处理的问题:操作上面的组件影响到了下面的组件???

解决方法:

.........................................................................................................

如果页面需要使用相同的组件,我们需要保证两点不同,
1.组件名
2.actiion.type不同
这样当点击页面派发action的时候,才不会相互影响

......................................................................................................

具体实现:修改组件派发的action中的type

就是当我们使用redux-redux管理数据时

这一步相当于把所有子组件的reducer放在了同一个文件下。

所以当派发action时,如果里面的type相同,程序就会走到对应的判断语句里,从而修改各个组件的state

最后注意:组件获取的是自己组件的数据

react引入相同组件时互不影响的更多相关文章

  1. react 项目实战(十)引入AntDesign组件库

    本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm ...

  2. 小程序 components 下的组件引入字体图标时样式不生效

    在组件内的样式在引入一遍 字体图标样式, pages 下的组件不受影响,全局引入字体图标样式即刻,不需要再次引入

  3. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  4. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  5. react - 解刨组件的多种写法

    一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...

  6. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  7. React笔记:组件(3)

    1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...

  8. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  9. React之智能组件和木偶组件

    智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是 ...

  10. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

随机推荐

  1. Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  2. bootstrap清除拟态框内添加新HTML再打开时会有缓存现象

    $(function(){ $("#editor").on("hidden.bs.modal",function(){ //清除缓存方法 $(this).fin ...

  3. bzoj1295: [SCOI2009]最长距离

    bfs最短路. 写的真丑... #include<cstdio> #include<algorithm> #include<cstring> #include< ...

  4. 解决linux下javac -version和java -version版本显示不一致

    解决linux下javac -version和java -version版本显示不一致 [javascript] view plaincopy [root@localhost usr]# $JAVA_ ...

  5. CentOS7关闭/开启防火墙出现 Unit iptables.service failed to load

    在vm中安装好tomcat,而且在liunx中使用nc命令可以返回成功,但是更换到window中访问不到tomcat的情况,是由于linux防火墙的问题造成的,传统的解决方式有2中 第一种解决方案: ...

  6. Windows系统还原失败心得

    最近我的Windows10连续几天出现了蓝屏,怀疑是某软件的Bug造成的,于是想用系统还原功能回到前一段时间,我找到了那款软件安装的时间. 到了选择还原点界面,发现有5个还原点,最旧的一个刚好就是那款 ...

  7. SSH服务拒绝了密码

    原因一:密码错误 解决方法:修改密码 方式一:救援模式修改密码 方式二:单用户模式破解root密码 原因二: /etc/ssh/sshd_config里设置禁止root用户直接远程登录 解决方法: v ...

  8. maven打包上传到本地中央库

    pom文件中添加插件如下 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins< ...

  9. 个推基于Consul的配置管理

    作者:个推应用平台基础架构高级研发工程师 阿飞 在微服务架构体系中,由于微服务众多,服务之间又有互相调用关系,因此,一个通用的分布式配置管理是必不可少的.一般来说,配置管理需要解决配置集中管理.在系统 ...

  10. 高通 fastboot 显示

    需要在fastboot里面添加功能用于保存,记录一下fastboot显示的过程. android O新添加了选项,如下 platform/msm_shared/rules.mk ifeq ($(ENA ...