React inter-component communication

Introduction: we all know, the communication between the component and the component is a ReactJS difficult. In React actual development, transfer values between father and son is more common components, just to get into the small partners can easily be communication between the assembly about the ignorant. Today took time summed up by value between father and son React components, and vue similar ideas, the parent component sub-assemblies to traditional values, the father of the initial state, sub-assemblies are received by this.props on it; subcomponents to parent component values need to pass a binding event, then the event is the parent component to pass over this.props.event to replacement value. I use the code below will demonstrate.

Parent component subassembly to pass values:

The state parent component of the incoming sub-assemblies by props

Parent component:

import React, { Component } from 'react'
import Son from './Son'
export default class Father extends Component {
    constructor(props) {
        super(props);
         this.state = {
            msg: 'I am a parent component pass over the value --5'
        }
    }
    render() {
        let style02 = {
            width:400,
            height: 100,
            backgroundColor: 'red'
        }
        return (
            <div style={style02}>
                <P> parent element </ p>
               <Son msg = {this.state.msg}/>
            </div>
        )
    }
}

Subassembly:

import React, { Component } from 'react'
export default class Son extends Component {
    render() {
        let style01 = {
            width:200,
            height: 100,
            margin: '0 auto',
            backgroundColor: 'pink'
        }
        return (
            <div>
                <p style={style01}>子组件--- <br/><span>{this.props.msg}</span></p>
            </div>
        )
    }
}

Renderings:

Parent component subassembly to pass values:

Remember these words in which data, where the method is defined! !
Subassembly:

import React, { Component } from 'react'
export default class Son extends Component {
    constructor(props) {
        super();
        this.state = {
            msg: 'I am a sub-assembly'
        }
    }
    render() {
        return (
            <div>
                <H1> I am a subcomponent </ h1>
                <Button the onClick = {() => the this .props.handleClick ( the this .state.msg)}> Click to pass value of parent element </ button>
            </div>
        )
    }
}

 

Parent component:

import React, { Component } from 'react'
import Son from './Son'
export default class Father extends Component {
    constructor(props) {
        super(props);
         this.state = {
            msg: 'I am a parent component pass over the value --5'
        }
    }
    handleClick=(msg)=> {
        alert ( `sub-assembly which is received by the process of calling the parent component is passed msg: $ {msg}`)
    }
    render() {
        return (
            <div>
                <Son  handleClick = {this.handleClick}/>
            </div>
        )
    }
}

Effect: Click the button to pass values to the parent component.

Summary: thank you first read this blog, is not very simple ah friends, where you can not understand in the comments area, if you have any suggestions for articles, welcomed the guidance.