React中子元件和父元件之間傳值
阿新 • • 發佈:2018-12-14
最近公司的專案在用react,所以才開始接觸react,react和vue一樣,都是元件化的框架,那麼子元件和父元件之間怎麼傳值呢?
- 父元件向子元件傳值 ,父元件通過屬性的形式向子元件傳遞引數,子元件用過props接受父元件傳遞過來的引數;
父元件程式碼:
<todoItem content={item}/>
//todoItem 是子元件的class,通過content屬性,把item的值傳給子元件
子元件程式碼:
<div>{this.props.content}</div>
//在子元件裡需要資料的地方就可以直接用,通過prop接收
- 子元件向父元件傳值
<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,剛入門,有問題還請多指教