react同级组件传值,使用pubsub.js

react同级传值使用pubsub.js
1.安装pubsub-js

cnpm i pubsub-js --save

2.假定两个同级组件为A和B,现A向B传值。A代码如下:

import PubSub from 'pubsub-js'

// 方法  PubSub.publish('给兄弟组件监听的方法','要传递的数据')
handleClick=()=>{
	PubSub.publish('fun',data)
}

3.B代码如下:

import PubSub from 'pubsub-js'

// 方法 PubSub.subscribe('fun',(事件监听情况,传来的数据)=>{})
constructor(props){
	super(props);
	PubSub.subscribe('fun',(status,data)=>{
		console.log("监听:",status);
		console.log("传来的数据:",data);
	})
}

到这里就实现了

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中,同级组件之间是通过它们共同的父组件来实现的。具体步骤如下: 1. 在父组件中定义一个状态(state),用于存储需要递给子组件。 2. 在父组件中创建一个方法,用于更新状态(state)的。 3. 将这个方法作为props递给需要接收的子组件。 4. 在子组件中通过props接收并使用这个。 下面是一个示例代码来说明这个过程: ```jsx // 父组件 class ParentComponent extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } // 更新状态的方法 updateValue = (newValue) => { this.setState({ value: newValue }); } render() { return ( <div> <ChildComponent value={this.state.value} /> <AnotherChildComponent updateValue={this.updateValue} /> </div> ); } } // 第一个子组件 class ChildComponent extends React.Component { render() { return ( <div> <p>接收到的:{this.props.value}</p> </div> ); } } // 第二个子组件 class AnotherChildComponent extends React.Component { handleClick = () => { // 调用父组件递的方法来更新 this.props.updateValue('新的'); } render() { return ( <div> <button onClick={this.handleClick}>更新</button> </div> ); } } ``` 在上面的例子中,父组件`ParentComponent`中定义了一个`value`状态,并将其递给子组件`ChildComponent`。另外,父组件还将一个方法`updateValue`作为props递给另一个子组件`AnotherChildComponent`。当点击`AnotherChildComponent`中的按钮时,调用`updateValue`方法来更新父组件中的。 这样,子组件`ChildComponent`就能够接收并显示父组件中的了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值