首頁  >  文章  >  web前端  >  react子向父通訊有哪些方法?

react子向父通訊有哪些方法?

青灯夜游
青灯夜游原創
2020-11-25 10:14:283847瀏覽

react子元件向父元件通訊有兩種方法:回呼函數和自訂事件機制;但有時用自訂事件會顯然過於複雜,所以一般用回呼函數,父元件事先定義好回呼函數,並將回呼函數傳遞給子元件,子元件呼叫回呼函數,向父元件通訊。

react子向父通訊有哪些方法?

本教學操作環境:windows7系統、react16版,此方法適用於所有品牌電腦。

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 &#39;react&#39;;
import List3 from &#39;./components/List3&#39;;
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子向父通訊有哪些方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn