The idea is to use React’s props and render to update a function in a unrelated React component synchronously .
There are three steps:
goUpdate
.
//in Constructor
this.state = {
goUpdate : 1;
};
//in render
<ComponentB goUpdate = {this.state.goUpdate} />
The reason I give it a integer value is because if I give it a boolean, the render system in Component A and Component B will end up in an infinite loop.
goUpdate
. And then in Component B render
, do a check on goUpdate’s value. If the value passed from Component A is larger than the saved value, call the function you want.
//in Constructor
this.goUpdate = this.props.goUpdate
//in render
if (this.props.goUpdate > this.state.goUpdate){
handleFunction
}
goUpdate
in Component A, then handleFunction in component B will be triggered.