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


Posted in Javascript onApril 29, 2020

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
使用js显示当前时间示例
Mar 02 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
js精确的加减乘除实例
Nov 14 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 #Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 #Javascript
JS实现手写 forEach算法示例
Apr 29 #Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 #Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 #Javascript
深入浅析vue全局环境变量和模式
Apr 28 #Javascript
你准备好迎接vue3.0了吗
Apr 28 #Javascript
You might like
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php 保留字列表
2012/10/04 PHP
PHP写日志的实现方法
2014/11/05 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python求解平方根的方法
2015/03/11 Python
python利用datetime模块计算时间差
2015/08/04 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
运行Python编写的程序方法实例
2020/10/21 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
生物学学生自我评价
2014/01/17 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
班风口号
2014/06/18 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
金砖之国观后感
2015/06/11 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android