父子组件传值都是通过props, 父传子直接传数据，子传父要传一个函数。然后在子组件中调用这个函数把值传到父组件
父传子：props传值
// 父组件
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
state = {
data: '传给子组件的数据'
}
render() {
const { data } = this.state
return (
<div className="parent">
<Child data={ data } />
</div>
);
}
}
// 子组件
import React, { Component } from 'react';
class Child extends Component {
render() {
const { data } = this.props
return (
<div className='child'>
<div>父组件传过来的数据：{ data }</div>
</div>
);
}
}
子传父：回调函数
// 父组件
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
updateData = (data) => {
console.log('接收来自子组件的数据', data)
}
render() {
return (
<div className="parent">
{/*通过props传递一个函数给子组件*/}
<Child updateData={ this.updateData } />
</div>
);
}
}
// 子组件
import React, { Component } from 'react';
class Child extends Component {
handleSendData = () => {
// 子组件通过props调用父组件传过来的函数，并把数据传过去
this.props.updateData('子组件数据')
}
render() {
return (
<div className='child'>
<button onClick={this.handleSendData}>发送数据给父组件</button>
</div>
);
}
}
兄弟组件传值：发布订阅
兄弟组件传值可以借助pubsub-js库。
- 安装
npm i pubsub-js
- 引入
import PubSub from "pubsub-js";
- 使用
在需要发送消息的地方，我们可以使用
publish方法
import React, { Component } from 'react';
import PubSub from "pubsub-js";
class Child extends Component {
handleSendDataToBrother = () => {
PubSub.publish('brotherEvent', '来自兄弟组件的数据123')
}
render() {
return (
<div className='child'>
<button onClick={this.handleSendDataToBrother}>发送数据给兄弟组件</button>
</div>
);
}
}
export default Child;
在需要接收消息的地方，我们需要使用
subscribe方法进行订阅。不需要接收消息时，通过unsubscribe取消订阅
import React, { Component } from 'react';
import PubSub from "pubsub-js";
class Brother extends Component {
state = {
data: ''
}
componentDidMount() {
this.subscription = PubSub.subscribe('brotherEvent', (name, data) => {
console.log('data', data);
this.setState({
data
})
})
}
componentWillUnmount() {
// 当不再需要接收消息时，记得取消订阅
PubSub.unsubscribe(this.subscription);
}
render() {
return (
<div>
接收来自兄弟组件的数据: {this.state.data}
</div>
);
}
}
export default Brother;
