React communication between parent-child components __react

This blog mainly tells about, communication between parent and child components in react, which includes the exchange of values of parent and child components, and the exchange of functional methods, how the parent component passes values to the child component, the parent component passes the method to the child component, and the parent component invokes the method of the child component.
This blog mainly summarizes the react of the components of the communication mode, citing the specific code can refer to "react between components."

Uniform Description

1, <fuzujian/> On behalf of the parent component,
2, <zizujian/> Representative subassembly

(a) The parent component passes a value to the child component through the props, and the child component gets the passed value of the parent component through the

(a) The value is declared in the parent component of its own state, and then passed the value, as follows
//1. Initial value
constructor () {
    super ();
    This.state = {
      statevalue:true
    }
  }
//2. If there is a change in the set value
this.setstate ({
    statevalue:false
})
//3. Value
<zizujian Statevalue={this.state.statevalue}

//(ii) in the parent component, where necessary to fetch the values passed through the props parent component
//As in Componentdidmount
Componentdidmount () {
    const Huoquvalue = this.props.stateValue;
    if (!this.props.statevalue) {
        console.log (' Statevalue ', This,.props.statevalue)
    }
}

It is worth noting that SetState is an asynchronous method that triggers when a render value line is required. You can refer to my blog, "React's setstate immediate execution scenario."

(b) The parent component passes the method to the subassembly, which is obtained by props.

Parent Component file:
class Testhtml extends React.component {
    //1. Method declaration
    Propsfunction () {
        Console.log (' Declare in parent component's method ')
    }

    render () {return
        (
        <div>
            <span><span>
            //2. Delivery
            < Zizujian propsfunction={::this.propsfunction}/>
        </div>}}
function Mapstatetoprops (State, Ownprops) {return
    {
    }
}

function Mapdispatchtoprops (dispatch) {
    return {
        ... bindactioncreators (Action, Dispatch)
    }
}

export default connect (Mapstatetoprops, Mapdispatchtoprops) (testhtml)



subassembly to get

<button onclick={this.props.propsfunction}/>

Description: Write this paragraph of time, whim, unexpectedly put the react-redux of the page structure written out. Well, when you finish this, write down the structure type of the page if necessary.

(iii) calls methods in subcomponents in the parent component, implemented through ref and refs.

Here is a brief explanation

//idea is to give the subassembly a ref, and then the parent component obtains the
Componentwillreceiveprops (nextprops) by refs {
    This.refs.jiedian. Sub-component Method name ()
    ///Example
    //This.refs.getSwordButton.setFieldsValue ({
    //   XMLURL: Nextprops.syscode==null? NextProps.accountInfo.xmlUrl:nextProps.sysCode
    //})


<zizujian ref= "Jiedian"/>
}

(iv) Special circumstances
When you find that none of these methods work, or that you can't use them because of certain limitations, you change your mind.
In fact, we can also action–reduce in their external and public action-reduce.
Where the method is involved we will create a new method directly, declared in action, implemented in reduce . If it's just a value that doesn't work with a function, we can set it directly in reduce and assign it, and finally get it through mapstatetoprops .
For Mapstatetoprops, you can refer directly to the "React Dependency Injection Description (Mapstatetoprops/mapdispatchtoprops)"

Summary
1. The parent component passes a value to the subassembly through the state, and the child component obtains the value of the parent component through props.
2. The subassembly obtains the function method defined in the parent component through prop, but it needs to be specified in the label of the parent component's invocation subassembly.
3. The parent component invokes the method declared in the subassembly through refs, but it needs to add a ref node to the child component
4. The communication between components does not necessarily sink in these direct related things, our thinking can also be refreshing a height, can be done in the action-reduce.
end~
Please correct me.
~

~
There is not understand can also leave a message, contact information in the Personal data office.