-
React 中组件之间的通信分为三种情况:
-
父组件给子组件传值:Props
-
子组件给父组件传值:回调函数
-
非父子组件之间传值:事件总线
一、子组件给父组件传值
React 中要实现子组件给父组件传值,需要先让父组件通过 props 传递一个函数给子组件,然后在子组件中调用该函数,并将数据传递给父组件。
1、父组件传递函数给子组件
export default class Parent extends Component {
state = {
name: ''
}
getChildData = (childData) => {
this.setState({
name: childData
})
}
render() {
return (
<div>
<h1>父组件</h1>
<p>父组件接收到的数据:{this.state.name}</p>
<Child getChildData={this.getChildData}></Child>
</div>
)
}
}
2、子组件调用方法并传值
子组件中通过 props 可以接收到父组件传递的函数:
export default class Child extends Component {
state = {
name: '张三'
}
render() {
console.log(this.props);
return (
<div>
<button onClick={() => this.props.getChildData(this.state.name)}>按钮</button>
</div>
)
}
}
二、非父子组件之间传值
1、下载 events
yarn add events
npm i events
2、创建文件
创建一个 events.js 文件,在该文件中生成事件总线:
import { EventEmitter } from 'events';
export default new EventEmitter();
3、添加事件
在负责接收数据的组件中,给事件总线身上添加事件:
import event from './events.js'
export default class ChildB extends Component {
state = {
name: ''
}
// 组件挂载完成
componentDidMount() {
// 给事件总线添加事件
event.addListener('getData', (data) => {
// console.log(data);
this.setState({
name: data
})
})
}
render() {
return (
<div>
<h1>子组件B:负责接收数据</h1>
<p>接收到的数据:{this.state.name}</p>
</div>
)
}
}
4、调用事件
在负责传递数据的组件中,去调用事件总线身上的事件:
import event from './events.js'
export default class ChildA extends Component {
state = {
name: '张三'
}
sendData = () => {
event.emit('getData', this.state.name)
}
render() {
return (
<div>
<h1>子组件A:负责传递数据</h1>
<button onClick={this.sendData}>按钮</button>
</div>
)
}
}