This time I will bring you a detailed explanation of the use of component communication in React. What are the precautions when 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 uses text={this.state.text}
Child: Definition method changeChildren1 is used by the parent component to call the
child: use the property this.props.text to 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 (
            <p>
                <p><label>父组件</label><input type="text" onChange={this.change}/></p>
                <ChildrenComponent1 ref="c1" text={this.state.text}/>
            </p>                        
        )
    }
}) 
//子组件
var ChildrenComponent1 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //被父组件调用执行
    changeChildren1: function(text){
        this.setState({text: text});
    },
    render: function(){
        return (
            <p>
                <p>子组件-来自父组件的调用：{this.state.text}</p>
                <p>子组件-来自父组件的传参：{this.props.text}</p>
            </p>                        
        )
    }
})  
ReactDOM.render(<ParentComponent1/>, 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 (
            <p>
                <p>父组件-来自子组件的调用：{this.state.text}</p>                     
                <ChildrenComponent2 change={this.changeParent}/>
            </p>                        
        )
    }
}) 
//子组件
var ChildrenComponent2 = React.createClass({
    getInitialState: function(){
        return {
            text: ''
        }
    },
    //输入事件
    change: function(event){
        //调用子组件的方法
        this.props.change(event.target.value);
    },
    render: function(){
        return (
            <p>
                <p><label>子组件</label><input type="text" onChange={this.change}/></p>
            </p>                        
        )
    }
})  
ReactDOM.render(<ParentComponent2/>, 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 (
            <p>
                <p>父组件-来自子组件的调用：{this.state.text}</p>                     
                <ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
                <ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
            </p>                        
        )
    }
}) 
//子组件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 (
            <p>
                <p><label>子组件1</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件2的调用-{this.state.text}</p>
            </p>                        
        )
    }
})  
//子组件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 (
            <p>
                <p><label>子组件2</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件1的调用-{this.state.text}</p>
            </p>                        
        )
    }
})              
ReactDOM.render(<ParentComponent3/>, 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 (
            <p>
                <ChildrenComponent4_1 ref="cp1"/>
                <ChildrenComponent4_2 ref="cp2"/>
            </p>                        
        )                    
    }
}) 
//子组件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 (
            <p>
                <p><label>子组件1</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件2的调用-{this.state.text}</p>
            </p>                        
        )
    }
})  
//子组件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 (
            <p>
                <p><label>子组件2</label><input type="text" onChange={this.change}/></p>
                <p>来自子组件1的调用-{this.state.text}</p>
            </p>                        
        )
    }
});                
ReactDOM.render(<ParentComponent4/>, 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!