react组件之间传值
看过一些文章介绍react组件之间传值,无外乎以下几种情况:父子组件之间相互传值,兄弟节点之间传值。最常见的就是父子组件,做法也很简单:就是在父组件中直接通过props属性的方式将函数或者值传给子组件。父组件有变化,相应的值就会体现在子组件中;子组件有动作发生,则调用函数,函数是父组件传递过来的,父组件就能获取子组件的值。
还有一种情况,就是兄弟节点之间要传值,这个还比较复杂,因为他们之间没有直接的交集,但是他们有一个共同的父组件,可以借助父组件传递值,所以还是回到了父子组件传值上。
这里有个需求:有一个菜单列表,点击菜单会选择相应的选项,有一个标签页选项,点击标签可以切换选项。菜单和标签页可以产生一种联动,他们是两个兄弟节点,现在需要考虑的是选择菜单,标签页也跟着动,标签页选择的时候,菜单也跟着响应,这个示例可以很好的演示多种情况传值,效果如下所示:
代码部分:
import React,{useState} from 'react'
import {Tabs,Menu,Divider} from 'antd'
import 'antd/dist/antd.css'
const {TabPane} = Tabs
const MenuList = (props)=>{
const {current,setCurrent} = props;
const handleClick = e =>{
setCurrent(e.key)
}
return <Menu onClick = {handleClick} selectedKeys = {current} >
<Menu.Item key="a">aaa</Menu.Item>
<Menu.Item key="b">bbb</Menu.Item>
<Menu.Item key="c">ccc</Menu.Item>
</Menu>
}
const TabComponents = (props)=>{
const {activeKey,setActiveKey} = props;
const changeTabHandler = (key)=>{
setActiveKey(key)
}
return <Tabs activeKey={activeKey} onTabClick = {changeTabHandler}>
<TabPane tab="aaa" key="a">this is aaa</TabPane>
<TabPane tab="bbb" key="b">this is bbb</TabPane>
<TabPane tab="ccc" key="c">this is ccc</TabPane>
</Tabs>
}
const MyTabs = ()=>{
const [activeKey,setActiveKey] = useState('a')
return <div>
<MenuList setCurrent = {setActiveKey} current={activeKey}/>
<Divider/>
<TabComponents activeKey = {activeKey} setActiveKey = {setActiveKey}/>
</div>
}
export default MyTabs
这里使用了antd中的Menu和Tabs控件形成MenuList和TabComponents,他们组成一个新的组件MyTabs,在父组件中,我们通过useState函数定义了一个变量和设置变量的方法,分别对应activeKey,setActiveKey,最终将他们都传入MenuList和TabComponents中。
这种做法,达到了联动的效果,却破坏了Tabs默认的onTabClick事件,本来Tabs的切换是根据用户点击来做切换标签页,但是现在变成了既可以手动也可以自动,手动就是,用户点击菜单选项,通过外部传入值,切换tab,这里是通过改变默认值activeKey的方式实现,如果我们不添加onTabClick函数响应,那么用户点击标签页会失效。
==========================================================================
还有一种做法,可以通用,不仅可以父子之间,还可以是兄弟节点之间传值,就是发布订阅模式。这种方式,不需要父节点来维护值的状态,因此也不需要通过props属性传值,直接在需要传值的组件之间来通过发布订阅即可。组件内部自己维护状态的改变,而且这种方式也是可以双向的传值。
先上效果图,跟上面没什么两样:
代码需要增加一个简单的发布订阅实现:
EventEmmiter.js
const EventEmmiter = {
_events:{},
dispatch:function(event,data){
if(!this._events[event])
return;
for(var i=0;i<this._events[event].length;i++)
{
this._events[event][i](data);
}
},
subscribe:function(event,callback){
if(!this._events[event])
this._events[event] = []
this._events[event].push(callback)
}
}
export default EventEmmiter
PubSub.js
import React,{useState} from 'react'
import {Menu,Tabs,Divider} from 'antd'
import EventEmmiter from '../utils/EventEmmiter'
import 'antd/dist/antd.css'
const {TabPane} = Tabs
const MenuList = (props)=>{
const [current,setCurrent] = useState('a');
const clickHandler = (e)=>{
EventEmmiter.dispatch('changeTab',e.key)
setCurrent(e.key)
}
EventEmmiter.subscribe('changeMenu',(key)=>{
setCurrent(key)
})
return <Menu onClick = {clickHandler} selectedKeys = {current}>
<Menu.Item key="a">aaa</Menu.Item>
<Menu.Item key="b">bbb</Menu.Item>
<Menu.Item key="c">ccc</Menu.Item>
</Menu>
}
const TabComponent = (props)=>{
const [current,setCurrent] = useState('a');
const clickHandler = (e)=>{
EventEmmiter.dispatch('changeMenu',e)
setCurrent(e)
}
EventEmmiter.subscribe('changeTab',(key)=>{
setCurrent(key)
})
return <Tabs activeKey={current} onTabClick = {clickHandler}>
<TabPane key="a" tab="xxx">xxx this is aaa.</TabPane>
<TabPane key="b" tab="yyy">yyy this is bbb.</TabPane>
<TabPane key="c" tab="zzz">zzz this is ccc.</TabPane>
</Tabs>
}
const PubSub = ()=>{
return <div>
<MenuList/>
<Divider/>
<TabComponent/>
</div>
}
export default PubSub
这种方式比起前面,代码量虽然有增加,但是它却是一种通用的做法,不用考虑组件的关系。发布订阅是分开的,他们各自作用在不同的组件里面,是成对出现的。
本文地址:https://blog.csdn.net/feinifi/article/details/112565060
推荐阅读
-
.net C#中页面之间传值传参的六种方法
-
Android 入门第十讲02-广播(广播概述,使用方法(系统广播,自定义广播,两个activity之间的交互和传值),EventBus使用方法,数据传递,线程切换,Android的系统广播大全)
-
react 组件传值的三种方法
-
iOS中详解Block作为property属性实现页面之间传值
-
react 组件传值的三种方法
-
C#实现.net页面之间传值传参方法汇总
-
c# WinForm 窗体之间传值的几种方式(小结)
-
iOS中详解Block作为property属性实现页面之间传值
-
C#实现.net页面之间传值传参方法汇总
-
vue 进阶之实现父子组件间的传值