Menu
How can I use multiple Contexes in a React Class Component? Like how you can use multiple contexes in functional components like calling useContext twice or more on the contexes that you want to use?
export default class Component extends React.Component{
static contextType = LocalizationContext;
constructor(props){
super(props);
this.imageModule = new ImageModule();
this.state = {
}
}
componentDidMount = () => console.log(this.context);
render(){
return(
<React.Fragment>
{}
</React.Fragment>
);
}
}
555
Consuming Context With Class-based Components We have already seen a demo of how we can use the power of Context in class based components. One is to use the context from Consumer like “ThemeContext. Consumer” and the other method is by assigning context object from current Context to contextType property of our class.
Consuming Multiple Contexts To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree. If two or more context values are often used together, you might want to consider creating your own render prop component that provides both.
You can use an aspect of es6 destructuring to rename the diff context object properties right inside your component. Like this: const { user, despatch: setUser } = useContext(UserContext); const { theme, despatch: setTheme } = useContext(ThemeContext); const { state, despatch: setState } = useReducer(reducer);
A nested context does everything a parent context can do, i.e. perform queries, register new objects, delete objects, etc. A specific behavior is the ability to choose between a cascading or one-level commit or rollback.
The static contextType property won't work if you need more than one, so instead you need to use a context consumer. This is easiest when you only need the value in the render function:
export class Example extends React.Component {
render() {
<LocalizationContext.Consumer>
{(translate) => (
<SomeOtherContext.Consumer>
{(value) => (
<div>{translate(value)}</div>
)}
</SomeOtherContext.Consumer>
)}
</LocalizationContext.Consumer>
}
}
If you need the value in other lifecycle hooks, such as componentDidMount, then your best option is to wrap this component in one that can read the values from context and then pass them in as props:
export const Example = (props) => (
<LocalizationContext.Consumer>
{(translate) => (
<SomeOtherContext.Consumer>
{(value) => (
<InnerComponent translate={translate} value={value} {...props} />
)}
</SomeOtherContext.Consumer>
)}
</LocalizationContext.Consumer>
)
class InnerComponent extends React.Component {
componentDidMount() {
// something with props.translate or props.value
}
}
Before hooks, this problem was addressed using the render props pattern.
This is made much easier now using the useContext hook:
const Example = (props) => {
const translate = useContext(LocalizationContext);
const value = useContext(SomeOtherContext);
return <InnerComponent translate={translate} value={value} />
}
class InnerComponent extends React.Component {
componentDidMount() {
// something with props.translate or props.value
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
