React组件设计模式之组合组件应用实例分析

本文实例讲述了React组件设计模式之组合组件应用。分享给大家供大家参考，具体如下：

这种模式本质上解决的是组件之间传值的问题。但是它对于传值以及一些内部操控的逻辑封装得更严密。

场景：希望减少上下级组件之间props的传递，简单来说就是不用传做显式地传值，来达到组件之间相互通信的目的

举例来说，某些界面中应该有Tabs这样的组件，由Tab和TabItem组成，点击每个TabItem，该TabItem会高亮，

那么Tab和TabItem自然要进行沟通。很自然的写法是像下面这样

<TabItem active={true} onClick={this.onClick}>One</TabItem>
<TabItem active={false} onClick={this.onClick}>Two</TabItem>
<TabItem active={false} onClick={this.onClick}>Three</TabItem>

这样的缺点很明显：

  • 每次使用 TabItem 都要传递一堆 props
  • 每增加一个新的 TabItem，都要增加对应的 props
  • 如果要增加 TabItem，就要去修改 Tabs 的 JSX 代码

但是，组件之间的交互我们又不希望通过props或者context来实现。希望用法如下面一样简洁。

  <Tabs>
   <TabItem>第一</TabItem>
   <TabItem>第二</TabItem>
   <TabItem>第三</TabItem>
  </Tabs>

组件之间通过隐秘的方式进行通信，但这里的隐秘实际上是对props的操作在一个地方进行管理。

实现

明白了要实现的交互，和代码层面要实现的效果，就可以开始动手了。

TabItem组件有两个关键的props: active（表明当前是否应高亮），onTabClick（自己被点击时调用的回调函数），

TabItem由于是每个Tab页面的容器，它只负责把props.children渲染出来，所以用函数式组件即可。

export const TabItem = props => {
 const { active, onTabClick, children } = props
 const style = {
  color: active ? 'red' : 'green',
  cursor: 'pointer'
 }
 return <>
  <h1 style={style} onClick={onTabClick}>
   {children}
  </h1>
 </>
}

我们再来回顾一下想到达到的效果：

  <Tabs>
   <TabItem>第一</TabItem>
   <TabItem>第二</TabItem>
   <TabItem>第三</TabItem>
  </Tabs>

使用组件时要避免传递props的缺点，那么在哪里传递呢？自然是是Tabs组件。但上面并没有传入props啊。

Tabs 虽然可以访问到props里边的children，但是到手的children已经是现成的如果直接改它的话，会出问题。

不可以直接改children的话，我们就把children复制一份，然后改这个复制过来的children，再渲染出去，就ok啦！

下面来看Tabs的实现：

class Tabs extends React.Component {
 state={
  activeIndex: 0
 }
 render() {
  const { activeIndex } = this.state
  const newChildren = React.Children.map(this.props.children, (child, index) => {
   if (child.type) {
     // 复制并修改children
    return React.cloneElement(child, {
     active: activeIndex === index,
     onTabClick: () => this.setState({activeIndex: index})
    })
   } else {
    return child
   }
  })
  return <div className="tabs">
   {newChildren}
  </div>
 }
}

这里需要用到React不常用的api：

  • React.Children.map
  • React.cloneElement

使用React.Children.map来对props.children进行遍历。

而React.cloneElement可以复制某个元素，第一个参数是被复制的元素，第二个参数我们可以把想传入的props加进去，也就是这个时机，

我们将active和onTabClick传入。实现最终效果。

总结

这种模式比较好的把复杂逻辑完全封装起来了，抽象程度更好，比较适合开发组件开发者。针对props的扩展性也比较好，对于使用组件的开发者来说，也比较友好。

希望本文所述对大家react程序设计有所帮助。

赞 (0)

相关推荐

  • 详解react如何在组件中获取路由参数

    路由参数 假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置. import List from './component/list'; <Route path="list/:id" component={List} /> 注意 path 属性中的 :id 就是该路由的参数( param ).再来看看 List 页面的组件. /list 对应了 li

  • 详解React中传入组件的props改变时更新组件的几种实现方法

    我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新渲染.React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求.但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是

  • React 子组件向父组件传值的方法

    本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re

  • React组件的三种写法总结

    React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

  • react 父组件与子组件之间的值传递的方法

    概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但

  • React router动态加载组件之适配器模式的应用详解

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data'; function App(){ return ( <Router> <Switch> <Route exact path="/" render={() => (<Redirect to="/center" />)}

  • React如何将组件渲染到指定DOM节点详解

    React如何将组件渲染到指定DOM节点详解

    前言 众所周知React优点之一就是他的API特别简单.通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件.但是有时候还是会有些限制的,尤其是他的API中,不能控制组件所应该渲染到的DOM节点,这就让一些弹层组件很难控制.当父元素设置为overflow:hidden 的时候,问题就会出现了. 例如就像下面的这样: 我们实际期待的效果是这样的: 幸运的是,虽然不是很明显,但有一个相当优雅的方式来绕过这个问题.我们学到的第一个react函数是re

  • 谈谈React中的Render Props模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样的功能. 简要介绍:分离UI与业务的方法一直在演进,从早期的mixins,到HOC,再到Render Prop,本文主要对比HOC,谈谈Render Props 1 . 早期的mixins 早期复用业务通过mixins来实现,比如组件A和组件B中,有一些公用函数,通过mixins剥离这些公用部分,并

  • 详解React native全局变量的使用(跨组件的通信)

    RN中有两种方式使用全局变量 1.通过导入导出文件的方式 新建constants.js文件 const object = { website:'http://www.hao123.com', name:'好123', }; export default object; 需要用到的时候导入文件 import constants from './constansts.js' <Text>{constants.name}</Text> 还可以有另外一种导入文件的写法 export def

  • React组件设计模式之组合组件应用实例分析

    本文实例讲述了React组件设计模式之组合组件应用.分享给大家供大家参考,具体如下: 这种模式本质上解决的是组件之间传值的问题.但是它对于传值以及一些内部操控的逻辑封装得更严密. 场景:希望减少上下级组件之间props的传递,简单来说就是不用传做显式地传值,来达到组件之间相互通信的目的 举例来说,某些界面中应该有Tabs这样的组件,由Tab和TabItem组成,点击每个TabItem,该TabItem会高亮, 那么Tab和TabItem自然要进行沟通.很自然的写法是像下面这样 <TabItem

  • Vue组件中使用防抖和节流实例分析

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能 几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是 防抖(debounce) 和 节流(throttle) . 1. 观察者 防抖 我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台: <templat

  • Java设计模式之静态代理模式实例分析

    本文实例讲述了Java设计模式之静态代理模式.分享给大家供大家参考,具体如下: 代理模式,可以通过代理可以在原来的基础上附加一些其他的操作.静态代理模式相对比较简单无需再程序运行时动态的进行代理. 静态代理模式的角色: ① 抽象角色:真实对象和代理对象的共同接口.其中声明真实对象和代理对象需要做的事. ② 真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用. ③ 代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作. 下面提

  • 详解vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js

  • vue组件之间数据传递的方法实例分析

    vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

  • javascript设计模式 – 单例模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 单例模式.分享给大家供大家参考,具体如下: 介绍:单例模式是结构最简单的设计模式.单例模式用于创建那些在软件系统中独一无二的对象,是一个简单但很实用的设计模式. 定义:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法.单例模式是一种对象创建型模式. 场景:日常编码中会有很多需要重用的场景,例如弹窗,键盘输入这类公共组件,我们往往希望它只创建一次,在第二次使用时重复使用之前创建好的实例.为了节约

  • javascript设计模式 – 适配器模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 适配器模式原理与应用.分享给大家供大家参考,具体如下: 介绍:适配器模式的产生也来自具体的问题,拿mac来举例,我不能直接用mac链接VGA,不能直接连接网线接口,这是就需要提供一些转接头,来将一些特殊的接口与我们的火线口相链接. 在这个过程中转接头就相当于一类适配器,mac被转接头所扩展,所以mac称之为适配者.适配器的主要作用是将客户端的请求转化为对适配者接口的调用.好多场景下因为接口的不兼容, 多一个参数少一个参数,参数格式不正确,调用顺序等

  • javascript设计模式 – 装饰模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 装饰模式原理与应用.分享给大家供大家参考,具体如下: 介绍:装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为.在现实生活中,这种情况也到处存在,例如一张照片,可以不改变照片本身,通过增加一个相框,使其具有防潮的功能.装饰模式是一种用于替代继承的技术,它使用对象之间的关联关系来取代继承关系. 定义:动态的给一个对象增加一些额外的职责,就增加对象功能来说,装饰模式比生成子类实现更为灵活.装饰模式是一种对象结构模型. 场景:我们现有一个

  • Java设计模式之动态代理模式实例分析

    本文实例讲述了Java设计模式之动态代理模式.分享给大家供大家参考,具体如下: 前面介绍了静态代理模式,动态代理比静态代理模式更加强大.它能在程序运行时动态的生成代理对象.所谓动态代理类是在运行时生成的class,在生成它时,你必须提供一组interface给它,则动态代理类就宣称它实现了这些interface.当然,动态代理类就充当一个代理,你不要企图它会帮你干实质性的工作,在生成它的实例时你必须提供一个handler,由它接管实际的工作. 动态代理的角色和静态代理的角色一样: ① 抽象角色:

  • PHP设计模式之抽象工厂模式实例分析

    本文实例讲述了PHP设计模式之抽象工厂模式.分享给大家供大家参考,具体如下: 前面的文章说了PHP下的简单工厂(静态工厂) 和工厂模式,现在说一下抽象工厂模式 工厂模式我们已经说过,增加一个产品很简单,增加对应的产品类和工厂类,不需要对原有代码进行改动,符合开闭原则 现在接着上篇文章,我们又有了新的需求,我们要求苹果味饮料和香蕉味饮料,有百事和可口可乐两个品牌,用工厂模式,就实现不了了,我只能增加单一的产品,但是增加品牌我实现不了,引申而出抽象工厂模式,代码如下 <?php /** * Crea

随机推荐