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 事件小结 表格区别
Aug 13 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
js计算精度问题小结
Apr 22 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
layui实现动态和静态分页
Apr 28 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
python数据挖掘需要学的内容
2019/06/23 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
教师求职推荐信范文
2013/11/20 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
药品营销策划方案
2014/06/15 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
财务整改报告范文
2014/11/05 职场文书
华山导游词
2015/02/03 职场文书
论文评审意见
2015/06/05 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
python使用torch随机初始化参数
2022/03/22 Python