分类目录归档：Technology

React.JS: How to call a function in another unrelated component

发表评论

The idea is to use React’s props and render to update a function in a unrelated React component synchronously .

There are three steps:

  • Set a variable in Component A with whatever name you want. In this case, I name it 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.

  • Set a variable in Component B with whatever name you want. In this case, I also name it 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
		}
  • Then , all you need to do is to update goUpdate in Component A, then handleFunction in component B will be triggered.
    • read more