原文：Passing Data Between React Components — Parent, Children, Siblings
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 :-
- From Parent to Child using Props
- From Child to Parent using Callbacks
- 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.
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.
}
}
//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.
mply, 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 2: Also, send the defined callback function as a props to the Child1.js
}
}
Step 3: In Child1.js send the data using this.props.callback(dataToParent)
render() {
//you can call function sendData whenever you'd like to send data from child component to Parent component.
}
};
Between Siblings
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.
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
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
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 )
Pass the state and the callback function as props to all children inside the Provider Component.
}
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.
Use MyProvider component as a Parent to the two children — Child1, Child2.
</div>
);
}
}
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.
}
How does Child2 receives the data now?
Simply, accessing the Provider withing Consumer tags.
}
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.