What are the methods for react child to communicate with parent?

There are two ways for react child components to communicate with parent components: callback functions and custom event mechanisms; but sometimes using custom events is obviously too complicated, so callback functions are generally used, and the parent component defines the callback function in advance. , and pass the callback function to the child component, and the child component calls the callback function to communicate with the parent component.

The operating environment of this tutorial: windows7 system, react16 version. This method is suitable for all brands of computers.

React child component communicates with the parent component

In React, the child component communicates with the parent component in two ways:

1. Use callback functions: This is the flexibility and convenience of JavaScript, so you can get the runtime status.

2. Use custom event mechanism: This method is more versatile and widely used. When designing a component, considering adding an event mechanism can often simplify the component API.

But sometimes using custom events is obviously too complicated. In order to achieve the purpose, a simpler method is generally chosen.

Child components generally use callback functions to communicate with parent components. The parent component defines the callback function in advance and passes the callback function to the child component. The child component calls the callback function to communicate with the parent component.

Callback function

Realizes the function of hiding itself by clicking the hide component button in a child component

List3.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List3 extends Component {    
static propTypes = {        
        hideConponent: PropTypes.func.isRequired,
    }
    render() {      
      return (            
          <div>
                哈哈,我是List3               
                 <button onClick={this.props.hideConponent}>隐藏List3组件</button>
            </div>
        );
    }
}
export default List3;

App.jsx

import React, { Component } from 'react';
import List3 from './components/List3';
export default class App extends Component {   
 constructor(...args) {        
 super(...args);        
     this.state = {           
      isShowList3: false,
        };
    }
    showConponent = () => {       
     this.setState({            
     isShowList3: true,
        });
    }
    
    hideConponent = () => {      
      this.setState({         
         isShowList3: false,
        });
    }
    
    render() {        
         return (           
             <div>
                <button onClick={this.showConponent}>显示Lists组件</button>
                {
                    this.state.isShowList3 ?<List3 hideConponent={this.hideConponent} />:null
                }            
             </div>
        );
    }
}

Looking at the implementation method, you can find that it is the same as the implementation method of the traditional callback function. And setState generally appears in pairs with the callback function, because the callback function is to convert the internal state. Function tradition;

For more programming-related knowledge, please visit:Programming Learning! !

The above is the detailed content of What are the methods for react child to communicate with parent?. For more information, please follow other related articles on the PHP Chinese website!