react 方法传参（转发）

原文：Passing Data Between React Components — Parent, Children, Siblings

 

React is a JavaScript library created by Facebook. Data handling in React could be a bit tricky, but not as complicated as it might seem. I have currently compiled three methods of Data Handling in React :-

1. From Parent to Child using Props
2. From Child to Parent using Callbacks
3. Between Siblings :
   (i) Combine above two methods
   (ii) Using Redux
   (iii) Using React’s Context API

This blog majorly contains a compilation of the implementation of these concepts, which would surely be beneficial for any beginner trying to grasp things at a glance.

From Parent to Child Using Props

Let us consider our directory structure to be such that the Parent Component renders child components in the Application.

App
└── Parent
    ├── Child1
    └── Child2

This is the easiest direction of data flow in React and the most basic one.

class Parent extends React.Component {state = { data : "Hello World" } 
render() {
        
        return (
            <div>
                 <Child1/>            //no data to send             
                 <Child2 dataFromParent = {this.state.data} />
            </div>
        );    }
}
//It is no compulsion to use the data to send as a state, simple vars or const variables could also be used to send data from Parent to Child.

Simply, use this.props.dataFromParent (just a variable used for sending props) to access the data sent from Parent to Child.

class Child2 extends React.Component {
render() {
        
        return (
            <div>
                The data from parent is:{this.props.dataFromParent}
            </div>
        );
    }
}

From Child to Parent Using Callbacks

Let us suppose I need to send a message from Child1 to Parent — “Hey Popsie, How’s it going?”. To do that, I need to follow a series of steps.

Step 1: Define a callback function that takes in a parameter which we consider having accessed from the child in the Parent.js
Step 2: Also, send the defined callback function as a props to the Child1.js

class Parent extends React.Component {state = { message: "" }callbackFunction = (childData) => {      this.setState({message: childData})},render() {
        return (
            <div>
                 <Child1 parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );}
}

Step 3: In Child1.js send the data using this.props.callback(dataToParent)

class Child1 extends React.Component{sendData = () => {
         this.props.parentCallback("Hey Popsie, How’s it going?");
    },render() { 
//you can call function sendData whenever you'd like to send data from child component to Parent component.
    }
};

Between Siblings

When I was a beginner, it took me a hard time deciding which method to choose to share data between siblings, there are three methods known to me yet to share data between siblings and all of them have their own perks and cons.
Method 1: Combine the above two methods of sharing data.
This method however, will not work for complicated directory structures as one will have to write large bits of code for sending data between components at far levels from each other. The data, then will have to be pushed and pulled through each middle level.

Method 2: Use a global store maintaining the states of all child components which are needed to interact and consume the data required from the store — Redux

ethod 3: Use React’s Context API
There are tons of articles and blogs already regarding why React upgraded to Context API and which one is better in what terms, these two articles would help one understand it all:

React Context API - A Replacement for Redux?

Convert a React App that uses Redux for State Management to use React's New Context API

blog.bitsrc.io

 

You Might Not Need Redux

People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at…

medium.com

I have used this method and already have a slight inclination towards using this one over Redux.

The major advantage of Context API is that it saves the developer from Prop-Drilling.( Prop-drilling refers to the technique of passing down variables to sub components. The main idea is functional programming where you pass the parameters to the next function and so on)

Consider the directory structure and we need to pass data between Child1 and Child2. [ Child1 has to send message — “SSup brother??” to Child2 ]
We implement this in the following method using Context API:

App
├── Child1
└── Child2

Step1: Create a Provider Component for the two children.
This Provider mantains the state (data to be used by both components and some callback used to manipulate the states) and returns a contextObject.Provider JSX component )

Step 2: Pass the state and the callback function as props to all children inside the Provider Component.

export const MContext = React.createContext();  //exporting context objectclass MyProvider extends Component {state = {message: ""}render() {        return (            <MContext.Provider value={            {   state: this.state,                setMessage: (value) => this.setState({                            message: value })}}>            {this.props.children}   //this indicates that the global store is accessible to all the child tags with MyProvider as Parent            </MContext.Provider>)    }}

The provider is the boss for its children (the global store of all the states and callback functions to manipulate those states). Who-ever needs anything has to contact the provider first to access the objects.

(a) To set or manipulate the message by Child1, it has to access Provider and set the states of the Provider.

(b) To view/access the data by Child2, it has to access Provider to get the states.

Step 3: Use MyProvider component as a Parent to the two children — Child1, Child2.

class App extends React.Component {render() {
        return (
            <div>
                 <MyProvider>                      <div className="App">                      <Child1/>                      <Child2/>                      </div>               </MyProvider>            </div>
        );
}
}

Step 4:Implement the desired result in the same manner, but this time, using ContextObject.Consumer as explained below:
Both the children — Child1 and Child2 are the consumers of the Provider. Henceforth, they access the Provider within Consumer Tags.

import MContext
class Child1 extends React.Component {render() {    return (        <div>        <Mcontext.Consumer>        {(context) => (       <button onClick={()=>{context.setMessage("New Arrival")}}>Send</button>       )}        </Mcontext.Consumer>        </div>    ) }}

How does Child2 receives the data now?
Simply, accessing the Provider withing Consumer tags.

import MContext
class Child2 extends React.Component {render() {       return (         <div>            <Mcontext.Consumer>             {(context) => (              <p>{context.state.message}}</p>)}            </Mcontext.Consumer>         </div>   )}}

I hope this gives clear implementation details for Data Passing between various components in React.
Recommended:

Using Context in React

I had the opportunity to speak at React Conf 2018 about the new ways to use context in React. This blog post is a text…

medium.com

 

Sign up for The Daily Pick

By Towards Data Science

Hands-on real-world examples, research, tutorials, and cutting-edge techniques delivered Monday to Thursday. Make learning your daily ritual. Take a look.

 

 

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.