這篇文章主要介紹React如何實現(xiàn)父子組件通信，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的瑪曲網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
原理：父組件通過props（與vue中的props區(qū)分開）向子組件通信，子組件通過回調(diào)事件與父組件通信。
首先，先創(chuàng)建一個父組件Parent.js跟子組件Children.js，二者的關(guān)系為直接父子關(guān)系。
Parent.js父組件如下，給父組件一個默認(rèn)狀態(tài)state，引入子組件，通過在子組件加上toChildren={this.state.msg}，該處即為向子組件傳props。
重慶分公司
重慶分公司
import React from 'react';
import { Button } from 'element-react';
import Children from './Children';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:'父組件傳遞給子組件'
};
this.changeMsg = this.changeMsg.bind(this)
}
changeMsg(){
this.setState({
msg:'父組件傳遞給子組件（改變之后的內(nèi)容）'
})
}
render(){
return (
父子組件通信實例
父傳子
Children.js子組件如下，初始狀態(tài)通過props拿到父組件傳過來的值。
import React from 'react';
class Children extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:this.props.toChildren //通過props拿到父組件傳過來的值
};
}
render(){
return (
從父組件傳過來：
{this.state.msg}
注意：子組件取值時應(yīng)與父組件放在子組件的字段props一致，即本例中的 toChildren，如下
那么子組件想向父組件傳值（向上傳值），可以通過調(diào)用父組件傳過來的回調(diào)函數(shù)
在Parent.js中向Children.js中加入回調(diào)函數(shù)callback，綁定changeMsg方法
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:'父組件傳遞給子組件',
fromChildrn:''
};
this.changeMsg = this.changeMsg.bind(this)
}
changeMsg(val){
this.setState({
fromChildrn: val
})
}
render(){
return (
父子組件通信實例
{this.state.fromChildrn}
在子組件中，用this.props.callback()執(zhí)行父組件的回調(diào)函數(shù)，從而執(zhí)行綁定方法changeMsg，顯示子組件傳過來的值
import React from 'react';
import { Button } from 'element-react';
class Children extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:this.props.toChildren
};
this.toParent = this.toParent.bind(this)
}
toParent(){
this.props.callback('子組件傳過來的值') //子組件通過此觸發(fā)父組件的回調(diào)方法
}
render(){
return (
從父組件傳過來：
{this.state.msg}
子傳父
)
}
}
export default Children 注意：props中的回調(diào)函數(shù)名稱需一致，即本例中的callback，如下
以上是“React如何實現(xiàn)父子組件通信”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
