[ReactJS] Component caller

Giả sử bạn có 3 components như bên dưới.

Parent -> Middleware -> Child

import Middle from '../../.../middleComponent'
class Parent extends React.PureComponent {
	handleSaveInParent()
	{
		console.log('this function is called by child component');
	}
	
	render () {
		return <Middle
				  ...
				  onSave={this.handleSaveInParent}
				</Middle>
	}
}
export default Parent 

Sau đó ta tạo Middle component như sau

import Parent from '../../.../parentComponent'
class Middle extends React.PureComponent {
	handleSaveInMiddle()
	{
		// Call handleSaveInParent() function
		this.props.onSave()
	}
	
	render () {
		return <Parent
				  ...
				  onSave={this.handleSaveInMiddle}
				</Parent>
	}
}
export default Middle

Cuối cùng tạo Parent component

class Child extends React.PureComponent {
	handleSaveInChild()
	{
		// Call handleSaveInMiddle() function
		this.props.onSave()
	}
	
	render () {
		return 	<button onClick={this.handleSaveInChild}>
				  Save
				</button>
	}
}
export default Child