小程序如何做增长_React组件设计模式之组合组件

React组件设计模式之组合组件应用实例分析       这篇文章主要介绍了React组件设计模式之组合组件,结合实例形式分析了React组件设计模式中组合组件相关概念、原理、应用场景与操作注意事项,需要的朋友可以参考下

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

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

场景:希望减少上下级组件之间pro凡科抠图的传递,简单来说就是不用传做显式地传值,来达到组件之间相互通信的目的

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

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

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

这样的缺点很明显:

每次使用 TabItem 都要传递一堆 pro凡科抠图 每增加一个新的 TabItem,都要增加对应的 pro凡科抠图 如果要增加 TabItem,就要去修改 Tabs 的 JSX 代码

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

 Tabs 
 TabItem 第一 /TabItem 
 TabItem 第二 /TabItem 
 TabItem 第三 /TabItem 
 /Tabs 

组件之间通过隐秘的方式进行通信,但这里的隐秘实际上是对pro凡科抠图的操作在一个地方进行管理。

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

TabItem组件有两个关键的pro凡科抠图: active(表明当前是否应高亮),onTabClick(自己被点击时调用的回调函数),

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

export const TabItem = pro凡科抠图 = {
 const { active, onTabClick, children } = pro凡科抠图
 const style = {
 color: active 'red' : 'green',
 cursor: 'pointer'
 return 
 h1 >

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

 Tabs 
 TabItem 第一 /TabItem 
 TabItem 第二 /TabItem 
 TabItem 第三 /TabItem 
 /Tabs 

使用组件时要避免传递pro凡科抠图的缺点,那么在哪里传递呢?自然是是Tabs组件。但上面并没有传入pro凡科抠图啊。

Tabs 虽然可以访问到pro凡科抠图里边的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.pro凡科抠图.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来对pro凡科抠图.children进行遍历。

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

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

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

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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/ziyuan/3209.html