This time I will bring you a detailed explanation of the use of component communication in React. What are theprecautionswhen using component communication in React? Here are practical cases, let’s take a look.

Component communication

Here we only talk about the communication between the React component and the component itself. Component communication is mainly divided into three parts:

Parent component to Subcomponent communication: The parent component passes parameters to the subcomponent or the parent component calls the method of the subcomponent
The subcomponent communicates with the parent component: The subcomponent passes parameters to the parent component or the child component Methods of calling parent components
Communication between sibling components: passing parameters or calling each other between sibling components

It is recommended not to have too deep embedding Set of relationships

The parent component communicates with the child component

Parent: The method of calling the child component is mainly usedthis.refs.c1.changeChildren1
Parent: Passing parameters to child components mainly usestext={this.state.text}
Child: Definition method changeChildren1 is used by the parent component to call the
child: use the propertythis.props.textto get the parameters passed from the parent component

//父组件向子组件通信 //父组件 var ParentComponent1 = React.createClass({ getInitialState: function(){ return { text: '' } }, //输入事件 change: function(event){ this.setState({text: event.target.value}); //调用子组件的方法 this.refs.c1.changeChildren1(event.target.value); }, render: function(){ return (  
父组件
  
 ) } }) //子组件 var ChildrenComponent1 = React.createClass({ getInitialState: function(){ return { text: '' } }, //被父组件调用执行 changeChildren1: function(text){ this.setState({text: text}); }, render: function(){ return (  
子组件-来自父组件的调用：{this.state.text}
 子组件-来自父组件的传参：{this.props.text}
 
 ) } }) ReactDOM.render(, document.getElementById('p1'));

Copy after login

The child component communicates with the parent component

Parent: Define the method changeParent for the child component to call
Child: The main method of calling the parent component Usethis.props.change(event.target.value);

//子组件向父组件通信 //父组件 var ParentComponent2 = React.createClass({ getInitialState: function(){ return { text: '' } }, //被子组件调用执行 changeParent: function(text){ this.setState({text: text}); }, render: function(){ return (  
父组件-来自子组件的调用：{this.state.text}
  
 ) } }) //子组件 var ChildrenComponent2 = React.createClass({ getInitialState: function(){ return { text: '' } }, //输入事件 change: function(event){ //调用子组件的方法 this.props.change(event.target.value); }, render: function(){ return (  
子组件
 
 ) } }) ReactDOM.render(, document.getElementById('p2'));

Copy after login

Sibling component communication

Method 1 : Communicate through a common parent component

Because the React component must have and only one top-level element, there must be a common parent element (component) between sibling components, so Brothers can communicate through a common parent element (component). The communication method can be achieved by combining the father-son and son-father introduced above.

//兄弟组间通信-通过共同的父组件通信 //父组件 var ParentComponent3 = React.createClass({ getInitialState: function(){ return { text: '' } }, //被子组件2调用，向子组件1通信 changeChildren1: function(text){ //调用子组件1的方法 this.refs.cp1.changeState(text); }, //被子组件1调用，向子组件2通信 changeChildren2: function(text){ //调用子组件2的方法 this.refs.cp2.changeState(text); }, render: function(){ return (  
父组件-来自子组件的调用：{this.state.text}
   
 ) } }) //子组件1 var ChildrenComponent3_1 = React.createClass({ getInitialState: function(){ return { text: '' } }, changeState: function(text){ this.setState({text: text}); }, //输入事件 change: function(event){ //调用子组件的方法 this.props.change(event.target.value); }, render: function(){ return (  
子组件1
 来自子组件2的调用-{this.state.text}
 
 ) } }) //子组件2 var ChildrenComponent3_2 = React.createClass({ getInitialState: function(){ return { text: '' } }, changeState: function(text){ this.setState({text: text}); }, //输入事件 change: function(event){ //调用子组件的方法 this.props.change(event.target.value); }, render: function(){ return (  
子组件2
 来自子组件1的调用-{this.state.text}
 
 ) } }) ReactDOM.render(, document.getElementById('p3'));

Copy after login

Method 2: Communication through context

and through The common parent component communicates the same, the difference is that the context

//兄弟组间通信-通过 context 通信 //父组件 var ParentComponent4 = React.createClass({ getChildContext: function(){ return { changeChildren1: function(text){ this.refs.cp1.changeState(text) }.bind(this), changeChildren2: function(text){ this.refs.cp2.changeState(text) }.bind(this) } }, childContextTypes: { changeChildren1: React.PropTypes.func.isRequired, changeChildren2: React.PropTypes.func.isRequired }, render: function(){ return (    
 ) } }) //子组件1 var ChildrenComponent4_1 = React.createClass({ getInitialState: function(){ return { text: '' } }, contextTypes: { changeChildren2: React.PropTypes.func.isRequired }, changeState: function(text){ this.setState({text: text}); }, //输入事件 change: function(event){ //调用子组件的方法 this.context.changeChildren2(event.target.value); }, render: function(){ return (  
子组件1
 来自子组件2的调用-{this.state.text}
 
 ) } }) //子组件2 var ChildrenComponent4_2 = React.createClass({ getInitialState: function(){ return { text: '' } }, contextTypes: { changeChildren1: React.PropTypes.func.isRequired }, changeState: function(text){ this.setState({text: text}); }, //输入事件 change: function(event){ //调用子组件的方法 this.context.changeChildren1(event.target.value); }, render: function(){ return (  
子组件2
 来自子组件1的调用-{this.state.text}
 
 ) } }); ReactDOM.render(, document.getElementById('p4'));

Copy after login

is called. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!