App.js - The parent component
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';
import Context from './Context';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
messageThatllChange: "changing message",
};
}
render() {
return (
<Router>
<Switch>
<Context.Provider value={this.state.messageThatllChange}>
<Route exact path='/' component={ChildComponent1} />
<Route path='/chat' component={ChildComponent2} />
</Context.Provider>
</Switch>
</Router>
);
}
}
export default App;
ChildComponent1.js - child component
import React from 'react';
import Context from './Context';
class Join extends React.Component {
static contextType = Context;
constructor(props) {
super(props);
console.log(this.context); // this.context returns undefined.
}
render() {
return (
<div>
{/* Something important here */}
</div>
);
}
}
// Join.contextType = Context; // tried this too
export default Join;
In the child component 1 constructor trying to print this.context returns undefined
.
How do I pass the context from parent to children? What am I doing wrong?
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const Context = React.createContext({ message: "hi" });
class Child extends React.Component {
constructor() {
super();
console.log("Constructor: ", this.context); // undefined here
}
render() {
const message = this.context;
return <p>{message}</p>; // hello here
}
}
Child.contextType = Context;
function App() {
return (
<div className="App">
<Context.Provider value="hello">
<Child />
</Context.Provider>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Trying to print the context in the constructor returns undefined, but you should be able to use context in the render function like this.
You can run the example here: https://codesandbox.io/s/crazy-forest-89bd6?fontsize=14
Try to rewrite your child component like one of them below:
Dynamic Context
import React from 'react';
import Context from './Context'; // Context here is the name you defined as Context = React.createContext();
class Join extends React.Component {
render() {
let props = this.props;
let value = this.context;
return (
<div>
{/* Something important here */}
</div>
);
}
}
Join.contextType = Context; // Context here is the name you defined as Context = React.createContext();
export default Join;
Context.Consumer
import React from 'react';
import { Consumer } from './Context'; // the path is where your context file is
class Join extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Consumer>
{value => (
{/* Here you can retrieve your messageThatllChange */}
<div>
{/* Something important here */}
</div>
)
</Consumer>
);
}
}
export default Join;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.