介绍 & lt; TabItem活跃={真}> & lt; Tabs>
& lt; TabItem>第一& lt;/TabItem>
& lt; TabItem>第二& lt;/TabItem>
& lt; TabItem>第三& lt;/TabItem>
& lt;/Tabs>
这篇文章主要讲解了反应中组合组件的使用方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
这种模式本质上解决的是组件之间传值的问题。但是它对于传值以及一些内部操控的逻辑封装得更严密。
场景:希望减少上下级组件之间道具的传递,简单来说就是不用传做显式地传值,来达到组件之间相互通信的目的
举例来说,某些界面中应该有标签这样的组件,由标签和TabItem组成,点击每个TabItem,该TabItem会高亮,
那么选项卡和TabItem自然要进行沟通。很自然的写法是像下面这样
组件之间通过隐秘的方式进行通信,但这里的隐秘实际上是对道具的操作在一个地方进行管理。
实现
明白了要实现的交互,和代码层面要实现的效果,就可以开始动手了。
TabItem组件有两个关键的道具:活跃(表明当前是否应高亮),onTabClick(自己被点击时调用的回调函数),
TabItem由于是每个标签页面的容器,它只负责把道具。孩子渲染出来,所以用函数式组件即可。
出口const TabItem=道具=比;{
const{活跃,> & lt; Tabs>
& lt; TabItem>第一& lt;/TabItem>
& lt; TabItem>第二& lt;/TabItem>
& lt; TabItem>第三& lt;/TabItem>
& lt;/Tabs> 使用组件时要避免传递道具的缺点,那么在哪里传递呢?自然是是标签组件。但上面并没有传入道具啊。
标签虽然可以访问到道具里边的孩子,但是到手的孩子已经是现成的如果直接改它的话,会出问题。
不可以直接改的孩子话,我们就把孩子复制一份,然后改这个复制过来的孩子,再渲染出去,就好啦!
下面来看标签的实现:
类标签延伸反应。组件{
状态={
activeIndex: 0
}
呈现(){
const {activeIndex}=this.state
const newChildren=React.Children.map (this.props。孩子,孩子,指数=比;{
如果(child.type) {//复制并修改的孩子
返回的反应。cloneElement(孩子,{
活动:activeIndex===指数,>看完上述内容,是不是对反应中组合组件的使用方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。反应中组合组件的使用方法
