您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用React如何實(shí)現(xiàn)父子組件通信,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
1.父組件與子組件間的通信。
在 React 中,父組件可以向子組件通過(guò)傳 props 的方式,向子組件進(jìn)行通訊。
父組件 App.js
import React, { Component } from 'react'; import './App.css'; import Child from './child' class App extends Component { constructor(props){ super(props); this.state={ msg:'父類的消息', name:'John', age:99 } } callback=(msg,name,age)=>{ // setState方法,修改msg的值,值是由child里面?zhèn)鬟^(guò)來(lái)的 this.setState({msg}); this.setState({name}); this.setState({age}); } render() { return ( <div className="App"> <p> Message: {this.state.msg}</p> <Child callback={this.callback} age={this.state.age} name={this.state.name}></Child> </div> ); } } export default App;
父組件中,state里面有三個(gè)屬性,分別是msg,name和age,在子組件child中,如果想拿到父組件里面的屬性,就需要通過(guò)props傳遞。
在 <Child></Child> 標(biāo)簽里面添加
name={this.state.name} age={this.state.age}
寫(xiě)成
<Child name={this.state.name} age={this.state.age}></Child>
name和age分別是你要傳遞的屬性。
子組件 Child
import React from "react"; class Child extends React.Component{ constructor(props){ super(props); this.state={ name:'Andy', age:31, msg:"來(lái)自子類的消息" } } change=()=>{ this.props.callback(this.state.msg,this.state.name,this.state.age); } render(){ return( <div> <div>{this.props.name}</div> <div>{this.props.age}</div> <button onClick={this.change}>點(diǎn)擊</button> </div> ) } } export default Child;
在子組件中,通過(guò) {this.props.name} {this.props.age}就能拿到父組件里面的數(shù)據(jù)。
呈現(xiàn)在頁(yè)面上的就是這個(gè)樣子。
其中 John,99均來(lái)自于父組件App.js
2.子組件向父組件通信
子組件向父組件通訊,同樣也需要父組件向子組件傳遞 props 進(jìn)行通訊,只是父組件傳遞的,是作用域?yàn)楦附M件自身的函數(shù),子組件調(diào)用該函數(shù),將子組件想要傳遞的信息,作為參數(shù),傳遞到父組件的作用域中。
上面例子中,在子組件Child中綁定了onClick事件。 調(diào)用this.change方法。
注意change函數(shù)采用了箭頭函數(shù)的寫(xiě)法 change=()=>{},目的是為了改變this的指向。使得在函數(shù)單獨(dú)調(diào)用的時(shí)候,函數(shù)內(nèi)部的this依然指向child組件
如果不使用箭頭函數(shù),而是采用普通的寫(xiě)法
change(){ }
則需要在 constructor中綁定this,
this.change=this.change.bind(this)
或者在onClick方法中綁定this,
onClick={this.change=this.change.bind(this)}
在change方法中,通過(guò)props發(fā)送出去一個(gè)方法,比如說(shuō)叫callback方法,父組件中去接收這個(gè)方法,callback={this.callback},然后在自身的callback函數(shù)中進(jìn)行一些列操作。
上述就是小編為大家分享的使用React如何實(shí)現(xiàn)父子組件通信了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。