react如何實現子組件向父組件通信的方法

這篇文章主要介紹react如何實現子組件向父組件通信的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

react子組件向父組件通信有兩種方法：回調函數和自定義事件機制；但有時用自定義事件會顯然過于復雜，所以一般用回調函數，父組件事先定義好回調函數，并將回調函數傳遞給子組件，子組件調用回調函數，向父組件通信。

• 該方法適用于所有品牌的電腦。

React子組件向父組件通信

在 React 中，子組件向父組件通信可以使用兩種方法實現：

1、利用回調函數：這是 JavaScript 靈活方便之處，這樣就可以拿到運行時狀態。

2、 利用自定義事件機制：這種方法更通用，使用也更廣泛。設計組件時，考慮加入事件機制往往可以達到簡化組件 API 的目的。

但有時用自定義事件會顯然過于復雜，為了達到目的，一般會選擇較為簡單的方法。

子組件向父組件通信一般用回調函數，父組件事先定義好回調函數，并將回調函數傳遞給子組件，子組件調用回調函數，向父組件通信。

回調函數

實現在子組件中點擊隱藏組件按鈕可以將自身隱藏的功能

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>
        );
    }
}

觀察一下實現方法,可以發現它與傳統回調函數的實現方法一樣.而且setState一般與回調函數均會成對出現,因為回調函數即是轉換內部狀態是的函數傳統;

以上是“react如何實現子組件向父組件通信的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！