在使用React的过程中，组件之间的消息传递（通信）是不可避免的。组件之间的通信一般有以下几种情况：父组件与子组件通信子组件与父组件通信非嵌套组件跨层通信组件之间的通信1.父组件与子组件通信。父组件将props传递给子组件，子组件获取到props后进行相应的处理。演示代码：父组件parent.js:importReact,{Component}from"react";exportdefaultclassAppextendsComponent{render(){return(
)}}子组件child.js:importReactfrom"react";classChildextendsReact.component{construtor(props){super(props)this.state={}}render(){return(
{props.title}
)}}exportdefaultChild;**2.子组件与父组件通信**使用回调函数实现子组件与父组件的通信：父组件传递一个函数作为props给子组件，子组件调用回调函数。您可以演示代码：child.jsimportReactfrom"react";classChildextendsReact.component{construtor(props){super(props)this.state={}}cb=(msg)=>{this.props.callback(msg);}render(){return(
点击我
)}}exportdefaultChild;app.jsimportReactfrom"react";exportdefaultclassAppextendsReact.Component{callback(msg){console.log(msg);}render(){返回（
)}}**3.非嵌套组件之间的通信**非嵌套组件是没有任何包含关系的组件，包括兄弟组件和非兄弟组件不在同一个parent中首先需要引入一个包eventsnpminstallevents--save新建一个ev.js文件，导入事件包，并使用import{EventEmitter}from"events";exportdefaultnewEventEmitter();app.jsimportReact,{Component}from'react';importchildAfrom“./childA”；从“./childB”导入childB；导出默认类AppextendsComponent{render(){return(
);}}childAimportReact，{Component}from"react";importemitterfrom"./ev"exportdefaultclassChildAextendsComponent{constructor(props){super(props);this.state={msg:null,};}componentDidMount(){//声明一个自定义事件//组件加载后this.eventEmitter=emitter.addListener("callMe",(msg)=>{this.setState({msg})});}//在组件销毁之前移除事件监听器>);}}childB:importReact,{Component}from"react";importemitterfrom"./ev"exportdefaultclassChildBextendsComponent{render(){constcb=(msg)=>{return()=>{//触发自定义事件emitter.emit("callMe","test")}}return(
childBclick
);}}
