Detailed explanation of the use of component communication in React

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'));

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'));

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'));

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'));

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!

Recommended reading:

Detailed explanation of the implementation steps of PromiseA

Detailed explanation of the steps to highlight the selected li in react implementation

The above is the detailed content of Detailed explanation of the use of component communication in React. For more information, please follow other related articles on the PHP Chinese website!