1. 程式人生 > >React中子元件和父元件之間傳值

React中子元件和父元件之間傳值

最近公司的專案在用react,所以才開始接觸react,react和vue一樣,都是元件化的框架,那麼子元件和父元件之間怎麼傳值呢?

  1. 父元件向子元件傳值 ,父元件通過屬性的形式向子元件傳遞引數,子元件用過props接受父元件傳遞過來的引數;

父元件程式碼:

<todoItem content={item}/>     
 //todoItem 是子元件的class,通過content屬性,把item的值傳給子元件

子元件程式碼:

<div>{this.props.content}</div>
//在子元件裡需要資料的地方就可以直接用,通過prop接收
  1. 子元件向父元件傳值
    ,子元件需要呼叫父元件傳遞過來的方法進行通訊 子元件程式碼:
<div onClick={this.handleDelete.bind(this)}>{this.props.content}</div>
handleDelete(){
    this.props.parentDelete(this.props.content);
}
//子元件通過父元件傳過來的屬性parentDelete呼叫了父元件的handleDelete方法,同時把引數參過去

父元件程式碼:

<todoItem parentDelete={this.handleDelete.bind(this)} content={item}/> 
handleDelete(item){
    console.log(item);
}
//父元件通過handleDelete方法接受子元件傳過來的引數

以上,初學react,剛入門,有問題還請多指教