分类目录归档: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