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 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
文件系统基本操作类
2006/11/23 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
15分钟上手vue3.0(小结)
2020/05/20 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
基于python时间处理方法(详解)
2017/08/14 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
基于Python实现简单学生管理系统
2020/07/24 Python
浅析Python 责任链设计模式
2020/09/11 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
2014年高数考试作弊检讨书
2014/12/14 职场文书
中秋客户感谢信
2015/01/22 职场文书
少先队中队工作总结
2015/08/14 职场文书
毕业设计工作总结
2015/08/14 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
PHP解决高并发问题
2021/04/01 PHP
如何利用React实现图片识别App
2022/02/18 Javascript
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫